瀏覽代碼

新增关系弹窗

YaolongHan 4 年之前
父節點
當前提交
0fb080693a
共有 1 個文件被更改,包括 267 次插入8 次删除
  1. 267 8
      src/views/maintain/relationship/relation/components/addRelationDialog.vue

+ 267 - 8
src/views/maintain/relationship/relation/components/addRelationDialog.vue

@@ -1,15 +1,274 @@
 <template>
-<el-dialog>
-
-</el-dialog>
+  <div class="change-relation-ship">
+    <el-dialog :title="values.addShip" :visible.sync="addShipDialog">
+      <el-form
+        :model="ruleForm"
+        status-icon
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <p class="mb-20 color-AAA">{{ values.codeTip }}</p>
+        <!--        <el-form-item-->
+        <!--          :label="values.codeTitle"-->
+        <!--          prop="code"-->
+        <!--          class="mb-20"-->
+        <!--        >-->
+        <!--          <el-input-->
+        <!--            v-model="ruleForm.code"-->
+        <!--            autocomplete="off"-->
+        <!--            :placeholder="values.pleaseEnter"-->
+        <!--          />-->
+        <!--        </el-form-item>-->
+        <el-form-item :label="values.codeTitle" class="mb-20">
+          <el-select v-model="codeValue" placeholder="请选择">
+            <el-option
+              v-for="item in optionsCode"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-row class="mb-20">
+          <el-col :span="12">
+            <p class="mb-20">
+              {{ values.mainObject }}
+              <span class="fw-bold color-AAA">{{ MainObject }}</span>
+            </p>
+            <el-form-item prop="main" :error="mainError">
+              <el-input
+                v-model="ruleForm.main"
+                autocomplete="off"
+                :placeholder="values.pleaseEnterCode"
+                :disabled="disabled"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <p class="mb-20">
+              {{ values.affiliatedObject }}
+              <span class="fw-bold color-AAA">{{ FromObject }}</span>
+            </p>
+            <el-form-item
+              v-for="(item, index) in ruleForm.codeList"
+              :key="index"
+              :prop="`codeList.${index}.value`"
+              :rules="rules.codeList"
+              :error="fromError"
+            >
+              <el-input
+                v-model="item.value"
+                :placeholder="values.pleaseEnterCode"
+                :disabled="disabled"
+              />
+              <el-button
+                @click.prevent="removeCode(item)"
+                icon="el-icon-circle-close"
+                type="text"
+                :disabled="disabled"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                @click="addCode"
+                icon="el-icon-circle-plus-outline"
+                style="width: 220px"
+                :disabled="disabled"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button
+            type="primary"
+            class="fr ml-20"
+            @click="submitForm('ruleForm')"
+            >{{ values.add }}
+          </el-button>
+          <el-button class="fr" @click="addShipDialog = false"
+            >{{ values.cancel }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
 </template>
 
-<script>
-export default {
-    name: 'addRelationDialog'
-}
+<script lang="ts" >
+// import { relAdd } from "../../../../api/relation/api";
+import { Component, Vue } from "vue-property-decorator";
+@Component({
+    name: "addRelationDialog"
+})
+export default class addRelationDialog extends Vue  {
+
+  props: ["values"]
+  data() {
+    var checkCode = (rule, value, callback) => {
+      //TODO
+      callback();
+    };
+    var checkMain = (rule, value, callback) => {
+      //TODO
+      callback();
+    };
+    var codeList = (rule, value, callback) => {
+      //TODO
+      console.log(value);
+      callback();
+    };
+    return {
+      mainError: "",
+      fromError: "",
+      addShipDialog: false,
+      // disabled: true,
+      optionsCode: [
+        {
+          value: "cadId",
+          label: "CADID图纸编码",
+        },
+        {
+          value: "name",
+          label: "设备名称",
+        },
+        {
+          value: "id",
+          label: "设备ID",
+        },
+        {
+          value: "localId",
+          label: "本地编码",
+        },
+        {
+          value: "localName",
+          label: "本地名称",
+        },
+      ],
+      codeValue: "",
+      MainObject: `(限制条件:${localStorage.getItem("MainObject") || "无"} )`,
+      FromObject: `(限制条件:${localStorage.getItem("FromObject") || "无"} )`,
+      ruleForm: {
+        main: "",
+        codeList: [
+          {
+            value: "",
+          },
+        ],
+      },
+      rules: {
+        code: [
+          { required: true, message: "请输入对应识别编码", trigger: "blur" },
+          { validator: checkCode, trigger: "blur" },
+        ],
+        main: [
+          { required: true, message: "请输入对应识别编码", trigger: "blur" },
+          { validator: checkMain, trigger: "blur" },
+        ],
+        codeList: [
+          { required: true, message: "请输入对应识别编码", trigger: "blur" },
+          { validator: codeList, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    disabled() {
+      return this.codeValue === "" ? "disabled" : false;
+    },
+  },
+  watch: {},
+  methods: {
+    addCode() {
+      this.ruleForm.codeList.push({
+        value: "",
+        key: Date.now(),
+      });
+    },
+    removeCode(item) {
+      var index = this.ruleForm.codeList.indexOf(item);
+      if (index !== -1) {
+        this.ruleForm.codeList.splice(index, 1);
+      }
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        console.log(valid, "valid");
+        if (valid) {
+          let arr = [];
+          for (let item of this.ruleForm.codeList) {
+            if (item.value) {
+              arr = arr.concat(item.value);
+            }
+          }
+          let param = {
+            FromContent: arr,
+            MainContent: this.ruleForm.main,
+            RelType: localStorage.getItem("RelManualType"),
+            Type: this.codeValue,
+          };
+          //清空添加value
+          let that = this;
+          relAdd(param).then((res) => {
+            if (res.data.Result === "failure") {
+              if (res.data.ErrorType == 1) {
+                // this.mainError = res.data.Message
+                this.$nextTick(() => {
+                  this.mainError = res.data.Message;
+                });
+              } else if (res.data.ErrorType == 2) {
+                this.$nextTick(() => {
+                  this.fromError = res.data.Message;
+                });
+              } else {
+                this.$message.error(res.data.Message);
+              }
+            } else if (res.data.Result === "success") {
+              this.$message.success(res.data.Message);
+              this.$emit("update");
+              that.addShipDialog = false;
+              that.codeValue = "";
+              that.ruleForm.codeList = [{ value: "" }];
+              that.ruleForm.main = "";
+            }
+          });
+        } else {
+          console.log("error");
+          return false;
+        }
+      });
+    },
+  },
+};
 </script>
 
-<style scoped>
+<style scoped lang="less">
+@color-text: #aaa;
+.change-relation-ship {
+  /deep/ .el-form-item__label {
+    width: auto !important;
+  }
+
+  .fr {
+    float: right;
+  }
 
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+
+  .ml-20 {
+    margin-left: 20px;
+  }
+
+  .color-AAA {
+    color: @color-text;
+  }
+
+  .fw-bold {
+    font-weight: bold;
+  }
+}
 </style>