| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <template>
- <div class="change-relation-ship">
- <el-dialog
- :title="values.addShip"
- :before-close="closeDialog"
- :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" 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
- style="width: 220px"
- 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
- style="width: 220px"
- 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="closeDialog"
- >{{ values.cancel }}
- </el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <script lang="ts">
- import { relAdd } from "@/api/datacenter";
- import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
- let checkCode = (rule: any, value: any, callback: any) => {
- //TODO
- callback();
- };
- let checkMain = (rule: any, value: any, callback: any) => {
- //TODO
- callback();
- };
- let codeList = (rule: any, value: any, callback: any) => {
- //TODO
- callback();
- };
- @Component({
- name: "addRelationShip",
- // props:['addRelationValue','values']
- })
- export default class extends Vue {
- @Prop({ default: false }) addRelationValue?: boolean;
- @Prop({ default: {} }) values?: any;
- mainError = "";
- fromError = "";
- addShipDialog = false; //是否显示tooltip
- optionsCode = [
- // {
- // value: "cadId",
- // label: "CADID图纸编码",
- // },
- // {
- // value: "name",
- // label: "设备名称",
- // },
- {
- value: "id",
- label: "设备ID",
- },
- {
- value: "localId",
- label: "本地编码",
- },
- {
- value: "localName",
- label: "本地名称",
- },
- ];
- codeValue: string = "";
- MainObject: string = `(限制条件:${
- localStorage.getItem("MainObject") || "无"
- } )`;
- FromObject: string = `(限制条件:${
- localStorage.getItem("FromObject") || "无"
- } )`;
- ruleForm: any = {
- main: "",
- codeList: [
- {
- value: "",
- },
- ],
- };
- rules: object = {
- 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" },
- ],
- };
- public get disabled() {
- return this.codeValue === "" ? "disabled" : false;
- }
- @Watch("addRelationValue")
- getRelationValue(val: any, oldVal: any) {
- if (val) {
- this.addShipDialog = val;
- }
- }
- // methods
- addCode() {
- this.ruleForm.codeList.push({
- value: "",
- key: Date.now(),
- });
- }
- closeDialog() {
- this.addShipDialog = false;
- this.$emit("closeAddRelation");
- }
- removeCode(item: any) {
- var index = this.ruleForm.codeList.indexOf(item);
- if (index !== -1) {
- this.ruleForm.codeList.splice(index, 1);
- }
- }
- submitForm(formName: string) {
- this.$refs[formName].validate((valid: any) => {
- if (valid) {
- let arr: any[] = [];
- for (let item of this.ruleForm.codeList) {
- if (item.value) {
- arr = arr.concat(item.value);
- }
- }
- let param = {
- fromContent: arr,
- mainContent: this.ruleForm.main,
- relType: this.$route.query.relationType,
- type: this.codeValue,
- graphicType: this.$route.query.graphicType,
- zoneType: this.$route.query.zoneType
- ? this.$route.query.zoneType
- : "",
- };
- //清空添加value
- let that = this;
- relAdd(param).then((res) => {
- console.log("resres", res);
- if (res.result === "failure") {
- if (res.ErrorType == 1) {
- // this.mainError = res.data.Message
- this.$nextTick(() => {
- this.mainError = res.message;
- });
- } else if (res.ErrorType == 2) {
- this.$nextTick(() => {
- this.fromError = res.message;
- });
- } else {
- this.$message.error(res.message);
- }
- } else if (res.result === "success") {
- this.$message.success(res.message);
- this.$emit("update");
- this.closeDialog();
- that.codeValue = "";
- that.ruleForm.codeList = [{ value: "" }];
- that.ruleForm.main = "";
- }
- });
- } else {
- console.log("error");
- return false;
- }
- });
- }
- }
- </script>
- <style scoped lang="scss">
- $color-text: #aaa;
- .change-relation-ship {
- ::v-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>
|