|
@@ -1,15 +1,272 @@
|
|
|
<template>
|
|
|
-<el-dialog>
|
|
|
-
|
|
|
-</el-dialog>
|
|
|
+ <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>
|
|
|
-export default {
|
|
|
- name: 'addRelationDialog'
|
|
|
+<script lang="ts">
|
|
|
+// import {relAdd} from "../../../../api/relation/api";
|
|
|
+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: 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="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>
|