addRelationDialog.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <template>
  2. <div class="change-relation-ship">
  3. <el-dialog
  4. :title="values.addShip"
  5. :before-close="closeDialog"
  6. :visible.sync="addShipDialog"
  7. >
  8. <el-form
  9. :model="ruleForm"
  10. status-icon
  11. :rules="rules"
  12. ref="ruleForm"
  13. label-width="100px"
  14. class="demo-ruleForm"
  15. >
  16. <p class="mb-20 color-AAA">{{ values.codeTip }}</p>
  17. <el-form-item :label="values.codeTitle" class="mb-20">
  18. <el-select v-model="codeValue" placeholder="请选择">
  19. <el-option
  20. v-for="item in optionsCode"
  21. :key="item.value"
  22. :label="item.label"
  23. :value="item.value"
  24. >
  25. </el-option>
  26. </el-select>
  27. </el-form-item>
  28. <el-row class="mb-20">
  29. <el-col :span="12">
  30. <p class="mb-20">
  31. {{ values.mainObject }}
  32. <span class="fw-bold color-AAA">{{ MainObject }}</span>
  33. </p>
  34. <el-form-item prop="main" :error="mainError">
  35. <el-input
  36. style="width: 220px"
  37. v-model="ruleForm.main"
  38. autocomplete="off"
  39. :placeholder="values.pleaseEnterCode"
  40. :disabled="disabled"
  41. />
  42. </el-form-item>
  43. </el-col>
  44. <el-col :span="12">
  45. <p class="mb-20">
  46. {{ values.affiliatedObject }}
  47. <span class="fw-bold color-AAA">{{ FromObject }}</span>
  48. </p>
  49. <el-form-item
  50. v-for="(item, index) in ruleForm.codeList"
  51. :key="index"
  52. :prop="`codeList.${index}.value`"
  53. :rules="rules.codeList"
  54. :error="fromError"
  55. >
  56. <el-input
  57. style="width: 220px"
  58. v-model="item.value"
  59. :placeholder="values.pleaseEnterCode"
  60. :disabled="disabled"
  61. />
  62. <el-button
  63. @click.prevent="removeCode(item)"
  64. icon="el-icon-circle-close"
  65. type="text"
  66. :disabled="disabled"
  67. />
  68. </el-form-item>
  69. <el-form-item>
  70. <el-button
  71. @click="addCode"
  72. icon="el-icon-circle-plus-outline"
  73. style="width: 220px"
  74. :disabled="disabled"
  75. />
  76. </el-form-item>
  77. </el-col>
  78. </el-row>
  79. <el-form-item>
  80. <el-button
  81. type="primary"
  82. class="fr ml-20"
  83. @click="submitForm('ruleForm')"
  84. >{{ values.add }}
  85. </el-button>
  86. <el-button class="fr" @click="closeDialog"
  87. >{{ values.cancel }}
  88. </el-button>
  89. </el-form-item>
  90. </el-form>
  91. </el-dialog>
  92. </div>
  93. </template>
  94. <script lang="ts">
  95. import { relAdd } from "@/api/datacenter";
  96. import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
  97. let checkCode = (rule: any, value: any, callback: any) => {
  98. //TODO
  99. callback();
  100. };
  101. let checkMain = (rule: any, value: any, callback: any) => {
  102. //TODO
  103. callback();
  104. };
  105. let codeList = (rule: any, value: any, callback: any) => {
  106. //TODO
  107. callback();
  108. };
  109. @Component({
  110. name: "addRelationShip",
  111. // props:['addRelationValue','values']
  112. })
  113. export default class extends Vue {
  114. @Prop({ default: false }) addRelationValue?: boolean;
  115. @Prop({ default: {} }) values?: any;
  116. mainError = "";
  117. fromError = "";
  118. addShipDialog = false; //是否显示tooltip
  119. optionsCode = [
  120. // {
  121. // value: "cadId",
  122. // label: "CADID图纸编码",
  123. // },
  124. // {
  125. // value: "name",
  126. // label: "设备名称",
  127. // },
  128. {
  129. value: "id",
  130. label: "设备ID",
  131. },
  132. {
  133. value: "localId",
  134. label: "本地编码",
  135. },
  136. {
  137. value: "localName",
  138. label: "本地名称",
  139. },
  140. ];
  141. codeValue: string = "";
  142. MainObject: string = `(限制条件:${
  143. localStorage.getItem("MainObject") || "无"
  144. } )`;
  145. FromObject: string = `(限制条件:${
  146. localStorage.getItem("FromObject") || "无"
  147. } )`;
  148. ruleForm: any = {
  149. main: "",
  150. codeList: [
  151. {
  152. value: "",
  153. },
  154. ],
  155. };
  156. rules: object = {
  157. code: [
  158. { required: true, message: "请输入对应识别编码", trigger: "blur" },
  159. { validator: checkCode, trigger: "blur" },
  160. ],
  161. main: [
  162. { required: true, message: "请输入对应识别编码", trigger: "blur" },
  163. { validator: checkMain, trigger: "blur" },
  164. ],
  165. codeList: [
  166. { required: true, message: "请输入对应识别编码", trigger: "blur" },
  167. { validator: codeList, trigger: "blur" },
  168. ],
  169. };
  170. public get disabled() {
  171. return this.codeValue === "" ? "disabled" : false;
  172. }
  173. @Watch("addRelationValue")
  174. getRelationValue(val: any, oldVal: any) {
  175. if (val) {
  176. this.addShipDialog = val;
  177. }
  178. }
  179. // methods
  180. addCode() {
  181. this.ruleForm.codeList.push({
  182. value: "",
  183. key: Date.now(),
  184. });
  185. }
  186. closeDialog() {
  187. this.addShipDialog = false;
  188. this.$emit("closeAddRelation");
  189. }
  190. removeCode(item: any) {
  191. var index = this.ruleForm.codeList.indexOf(item);
  192. if (index !== -1) {
  193. this.ruleForm.codeList.splice(index, 1);
  194. }
  195. }
  196. submitForm(formName: string) {
  197. this.$refs[formName].validate((valid: any) => {
  198. if (valid) {
  199. let arr: any[] = [];
  200. for (let item of this.ruleForm.codeList) {
  201. if (item.value) {
  202. arr = arr.concat(item.value);
  203. }
  204. }
  205. let param = {
  206. fromContent: arr,
  207. mainContent: this.ruleForm.main,
  208. relType: this.$route.query.relationType,
  209. type: this.codeValue,
  210. graphicType: this.$route.query.graphicType,
  211. zoneType: this.$route.query.zoneType
  212. ? this.$route.query.zoneType
  213. : "",
  214. };
  215. //清空添加value
  216. let that = this;
  217. relAdd(param).then((res) => {
  218. console.log("resres", res);
  219. if (res.result === "failure") {
  220. if (res.ErrorType == 1) {
  221. // this.mainError = res.data.Message
  222. this.$nextTick(() => {
  223. this.mainError = res.message;
  224. });
  225. } else if (res.ErrorType == 2) {
  226. this.$nextTick(() => {
  227. this.fromError = res.message;
  228. });
  229. } else {
  230. this.$message.error(res.message);
  231. }
  232. } else if (res.result === "success") {
  233. this.$message.success(res.message);
  234. this.$emit("update");
  235. this.closeDialog();
  236. that.codeValue = "";
  237. that.ruleForm.codeList = [{ value: "" }];
  238. that.ruleForm.main = "";
  239. }
  240. });
  241. } else {
  242. console.log("error");
  243. return false;
  244. }
  245. });
  246. }
  247. }
  248. </script>
  249. <style scoped lang="scss">
  250. $color-text: #aaa;
  251. .change-relation-ship {
  252. ::v-deep .el-form-item__label {
  253. width: auto !important;
  254. }
  255. .fr {
  256. float: right;
  257. }
  258. .mb-20 {
  259. margin-bottom: 20px;
  260. }
  261. .ml-20 {
  262. margin-left: 20px;
  263. }
  264. .color-AAA {
  265. color: $color-text;
  266. }
  267. .fw-bold {
  268. font-weight: bold;
  269. }
  270. }
  271. </style>