editRelationDialog.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <div class="change-relation-ship">
  3. <el-dialog :title="values.editShip" :visible.sync="editShipDialog">
  4. <el-form
  5. :model="ruleForm"
  6. status-icon
  7. :rules="rules"
  8. ref="ruleForm"
  9. label-width="100px"
  10. class="demo-ruleForm"
  11. >
  12. <p class="mb-20 color-AAA">{{ values.deviceTip }}</p>
  13. <el-row class="mb-20">
  14. <el-col :span="12">
  15. <p class="mb-20">
  16. {{ values.mainObject }}
  17. <span class="fw-bold color-AAA"
  18. >(包括:XXXX类型,XXXX类型)限制条件</span
  19. >
  20. </p>
  21. <el-form-item>
  22. <el-input v-model="ruleForm.main" autocomplete="off" disabled />
  23. </el-form-item>
  24. </el-col>
  25. <el-col :span="12">
  26. <p class="mb-20">
  27. {{ values.affiliatedObject }}
  28. <span class="fw-bold color-AAA"
  29. >(包括:XXXX类型,XXXX类型)限制条件</span
  30. >
  31. </p>
  32. <el-form-item
  33. v-for="(item, index) in ruleForm.codeList"
  34. :key="index"
  35. :prop="`codeList.${index}.value`"
  36. :rules="rules.codeList"
  37. >
  38. <el-input
  39. v-model="item.value"
  40. :placeholder="values.pleaseEnterCode"
  41. />
  42. <el-button
  43. @click.prevent="removeCode(item)"
  44. icon="el-icon-circle-close"
  45. type="text"
  46. />
  47. </el-form-item>
  48. <el-form-item>
  49. <el-button
  50. @click="addCode"
  51. icon="el-icon-circle-plus-outline"
  52. style="width: 220px"
  53. />
  54. </el-form-item>
  55. </el-col>
  56. </el-row>
  57. <el-form-item>
  58. <el-button>{{ values.delete }} </el-button>
  59. <el-button
  60. type="primary"
  61. class="fr ml-20"
  62. @click="submitForm('ruleForm')"
  63. >{{ values.add }}
  64. </el-button>
  65. <el-button class="fr" @click="editShipDialog = false"
  66. >{{ values.cancel }}
  67. </el-button>
  68. </el-form-item>
  69. </el-form>
  70. </el-dialog>
  71. </div>
  72. </template>
  73. <script lang="ts">
  74. import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
  75. var codeList = (rule: any, value: any, callback: any) => {
  76. //TODO
  77. callback();
  78. };
  79. @Component({
  80. name: "addRelationShip",
  81. props: ["values"],
  82. })
  83. export default class extends Vue {
  84. editShipDialog: boolean = false;
  85. ruleForm: object = {
  86. code: "",
  87. main: "",
  88. codeList: [
  89. {
  90. value: "",
  91. },
  92. ],
  93. };
  94. rules: object = {
  95. codeList: [
  96. { required: true, message: "请输入对应识别编码", trigger: "blur" },
  97. { validator: codeList, trigger: "blur" },
  98. ],
  99. };
  100. addCode() {
  101. this.ruleForm.codeList.push({
  102. value: "",
  103. key: Date.now(),
  104. });
  105. }
  106. removeCode(item: any) {
  107. var index = this.ruleForm.codeList.indexOf(item);
  108. if (index !== -1) {
  109. this.ruleForm.codeList.splice(index, 1);
  110. }
  111. }
  112. submitForm(formName: string) {
  113. this.$refs[formName].validate((valid) => {
  114. if (valid) {
  115. this.editShipDialog = false;
  116. console.log("success");
  117. } else {
  118. console.log("error");
  119. return false;
  120. }
  121. });
  122. }
  123. }
  124. </script>
  125. <style scoped lang="scss">
  126. $color-text: #aaa;
  127. .change-relation-ship {
  128. ::v-deep .el-form-item__label {
  129. width: auto !important;
  130. }
  131. .fr {
  132. float: right;
  133. }
  134. .mb-20 {
  135. margin-bottom: 20px;
  136. }
  137. .ml-20 {
  138. margin-left: 20px;
  139. }
  140. .color-AAA {
  141. color: $color-text;
  142. }
  143. .fw-bold {
  144. font-weight: bold;
  145. }
  146. }
  147. </style>