addRelationShip.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <template>
  2. <div class="change-relation-ship">
  3. <el-dialog
  4. :title="values.addShip"
  5. :visible.sync="addShipDialog"
  6. >
  7. <el-form
  8. :model="ruleForm"
  9. status-icon
  10. :rules="rules"
  11. ref="ruleForm"
  12. label-width="100px"
  13. class="demo-ruleForm"
  14. >
  15. <p class="mb-20 color-AAA">{{values.codeTip}}</p>
  16. <!-- <el-form-item-->
  17. <!-- :label="values.codeTitle"-->
  18. <!-- prop="code"-->
  19. <!-- class="mb-20"-->
  20. <!-- >-->
  21. <!-- <el-input-->
  22. <!-- v-model="ruleForm.code"-->
  23. <!-- autocomplete="off"-->
  24. <!-- :placeholder="values.pleaseEnter"-->
  25. <!-- />-->
  26. <!-- </el-form-item>-->
  27. <el-form-item
  28. :label="values.codeTitle"
  29. class="mb-20"
  30. >
  31. <el-select v-model="codeValue" placeholder="请选择">
  32. <el-option
  33. v-for="item in optionsCode"
  34. :key="item.value"
  35. :label="item.label"
  36. :value="item.value">
  37. </el-option>
  38. </el-select>
  39. </el-form-item>
  40. <el-row class="mb-20">
  41. <el-col :span="12">
  42. <p class="mb-20">{{values.mainObject}}
  43. <span class="fw-bold color-AAA">(包括:XXXX类型,XXXX类型)限制条件</span>
  44. </p>
  45. <el-form-item
  46. prop="main"
  47. >
  48. <el-input
  49. v-model="ruleForm.main"
  50. autocomplete="off"
  51. :placeholder="values.pleaseEnterCode"
  52. :disabled="disabled"
  53. />
  54. </el-form-item>
  55. </el-col>
  56. <el-col :span="12">
  57. <p class="mb-20">{{values.affiliatedObject}}
  58. <span class="fw-bold color-AAA ">(包括:XXXX类型,XXXX类型)限制条件</span>
  59. </p>
  60. <el-form-item
  61. v-for="(item,index) in ruleForm.codeList"
  62. :key="index"
  63. :prop="`codeList.${index}.value`"
  64. :rules="rules.codeList"
  65. >
  66. <el-input
  67. v-model="item.value"
  68. :placeholder="values.pleaseEnterCode"
  69. :disabled="disabled"
  70. />
  71. <el-button
  72. @click.prevent="removeCode(item)"
  73. icon="el-icon-circle-close"
  74. type="text"
  75. :disabled="disabled"
  76. />
  77. </el-form-item>
  78. <el-form-item>
  79. <el-button
  80. @click="addCode"
  81. icon="el-icon-circle-plus-outline"
  82. style="width: 220px;"
  83. :disabled="disabled"
  84. />
  85. </el-form-item>
  86. </el-col>
  87. </el-row>
  88. <el-form-item>
  89. <el-button
  90. type="primary"
  91. class="fr ml-20"
  92. @click="submitForm('ruleForm')"
  93. >{{values.add}}
  94. </el-button>
  95. <el-button
  96. class="fr"
  97. @click="addShipDialog = false"
  98. >{{values.cancel}}
  99. </el-button>
  100. </el-form-item>
  101. </el-form>
  102. </el-dialog>
  103. </div>
  104. </template>
  105. <script>
  106. export default {
  107. name: "addRelationShip",
  108. props: ['values'],
  109. data() {
  110. var checkCode = (rule, value, callback) => {
  111. //TODO
  112. callback()
  113. }
  114. var checkMain = (rule, value, callback) => {
  115. //TODO
  116. callback()
  117. }
  118. var codeList = (rule, value, callback) => {
  119. //TODO
  120. callback()
  121. }
  122. return {
  123. addShipDialog: false,
  124. // disabled: true,
  125. optionsCode: [{
  126. value: 'cadId',
  127. label: 'CADID图纸编码'
  128. }, {
  129. value: 'name',
  130. label: '设备名称'
  131. }, {
  132. value: 'id',
  133. label: '设备ID'
  134. }, {
  135. value: 'localId',
  136. label: '本地编码'
  137. }, {
  138. value: 'localName',
  139. label: '本地名称'
  140. }],
  141. codeValue: '',
  142. ruleForm: {
  143. code: '',
  144. main: '',
  145. codeList: [{
  146. value: ''
  147. }]
  148. },
  149. rules: {
  150. code: [
  151. {required: true, message: '请输入对应识别编码', trigger: 'blur'},
  152. {validator: checkCode, trigger: 'blur'}
  153. ],
  154. main: [
  155. {required: true, message: '请输入对应识别编码', trigger: 'blur'},
  156. {validator: checkMain, trigger: 'blur'}
  157. ],
  158. codeList: [
  159. {required: true, message: '请输入对应识别编码', trigger: 'blur'},
  160. {validator: codeList, trigger: 'blur'}
  161. ]
  162. }
  163. }
  164. },
  165. computed:{
  166. disabled() {
  167. return this.codeValue === '' ? 'disabled':false
  168. },
  169. },
  170. methods: {
  171. addCode() {
  172. this.ruleForm.codeList.push({
  173. value: '',
  174. key: Date.now()
  175. })
  176. },
  177. removeCode(item) {
  178. var index = this.ruleForm.codeList.indexOf(item)
  179. if (index !== -1) {
  180. this.ruleForm.codeList.splice(index, 1)
  181. }
  182. },
  183. submitForm(formName) {
  184. this.$refs[formName].validate(valid => {
  185. if (valid) {
  186. let arr = []
  187. for(let item of this.ruleForm.codeList) {
  188. if(item.value) {
  189. arr = arr.concat(item.value)
  190. }
  191. }
  192. let param = {
  193. FromContent:arr,
  194. MainContent:this.ruleForm.main,
  195. RelType:localStorage.getItem('RelManualType'),
  196. Type:this.codeValue
  197. }
  198. this.$emit('addShip',param)
  199. //清空添加value
  200. } else {
  201. console.log('error')
  202. return false
  203. }
  204. })
  205. },
  206. }
  207. }
  208. </script>
  209. <style scoped lang="less">
  210. @color-text: #AAA;
  211. .change-relation-ship {
  212. /deep/ .el-form-item__label {
  213. width: auto !important;
  214. }
  215. .fr {
  216. float: right;
  217. }
  218. .mb-20 {
  219. margin-bottom: 20px;
  220. }
  221. .ml-20 {
  222. margin-left: 20px;
  223. }
  224. .color-AAA {
  225. color: @color-text
  226. }
  227. .fw-bold {
  228. font-weight: bold;
  229. }
  230. }
  231. </style>