dataForm.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <el-row :gutter="20" class="data-form">
  3. <el-form label-position="top" ref="form" label-width="300px" :model="form" :rules="rules">
  4. <template v-if="Object.keys(header).length > 0">
  5. <p class="title">基础信息</p>
  6. <el-row :gutter="18">
  7. <el-col :span="8" :key="item.path" v-for="item in header.basicInfos.data">
  8. <el-form-item
  9. :prop="item.path"
  10. :label="item.aliasName">
  11. <el-input v-model="form[item.path]" :disabled="!item.editable"/>
  12. </el-form-item>
  13. </el-col>
  14. </el-row>
  15. <div class="content">
  16. <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  17. <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item"
  18. :name="index.toString()"/>
  19. </el-tabs>
  20. <div class="table" style="height: 194px;overflow: auto">
  21. <el-row :gutter="18">
  22. <el-col :span="item.dataType == 'ATTACHMENT'? 24:8"
  23. :key="item.path"
  24. v-for="item in header.dictStages.data"
  25. :style="{ 'height':item.dataType == 'ATTACHMENT'? 'auto':'93px' }"
  26. >
  27. <el-form-item
  28. :label="item.unit ? item.aliasName + ' (' + item.unit + ')' : item.aliasName">
  29. <el-input
  30. :disabled="!item.editable"
  31. v-if="item.dataType == 'STRING'"
  32. v-model="form[item.path]"/>
  33. <el-input
  34. v-else-if="item.dataType == 'DOUBLE' || item.dataType == 'INTEGER'"
  35. type="number"
  36. v-model="form[item.path]">
  37. <template slot="append" v-if="item.unit">{{ item.unit }}</template>
  38. </el-input>
  39. <el-select
  40. v-else-if="item.dataType == 'MENUM'"
  41. placeholder="请选择"
  42. v-model="form[item.path]"
  43. multiple
  44. collapse-tags>
  45. <el-option :key="index" :label="op.name" :value="op.code"
  46. v-for="(op,index) in item.dataSource"></el-option>
  47. </el-select>
  48. <el-select
  49. v-else-if="item.dataType == 'ENUM' || item.dataType == 'BOOLEAN'"
  50. placeholder="请选择"
  51. v-model="form[item.path]">
  52. <el-option :key="index" :label="op.name" :value="op.code"
  53. v-for="(op,index) in item.dataSource"></el-option>
  54. </el-select>
  55. <el-date-picker
  56. v-else-if="item.dataType == 'DATETIME'"
  57. v-model="form[item.path]"
  58. placeholder="选择日期"
  59. format="yyyy 年 MM 月 dd 日"
  60. value-format="yyyy-MM-dd"
  61. type="date">
  62. </el-date-picker>
  63. <uploadImgs
  64. v-else-if="item.dataType == 'ATTACHMENT'&& item.path === 'infos.Pic'"
  65. :readOnly="false"
  66. v-model="form[item.path]"
  67. :keysArr="Array.isArray(form[item.path]) ? form[item.path]:[]"
  68. :context-key="item.path"
  69. :isShow="1"
  70. @change="changeItem"/>
  71. <uploadFiles
  72. v-else-if="item.dataType == 'ATTACHMENT'"
  73. v-model="form[item.path]"
  74. :readOnly="false"
  75. :isShow="1"
  76. :keys-arr="Array.isArray(form[item.path]) ? form[item.path]:[] "
  77. :show-file-list="false"
  78. :context-key="item.path"
  79. @change="changeItem"/>
  80. </el-form-item>
  81. </el-col>
  82. </el-row>
  83. </div>
  84. </div>
  85. </template>
  86. </el-form>
  87. </el-row>
  88. </template>
  89. <script lang="ts">
  90. import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
  91. import uploadFiles from "@/components/public/uploadFiles.vue";
  92. import uploadImgs from "@/components/public/uploadImgs.vue";
  93. function flattenKeys(obj: any) {
  94. let res = {}
  95. function isObject(val: any) {
  96. return typeof val === 'object' && !Array.isArray(val)
  97. }
  98. function digKeys(prev: any, obj: any) {
  99. Object.entries(obj).forEach(([key, value]) => {
  100. const currentKey = prev ? `${prev}.${key}` : key
  101. if (isObject(value)) {
  102. digKeys(currentKey, value)
  103. } else {
  104. res[currentKey] = value
  105. }
  106. })
  107. }
  108. digKeys('', obj)
  109. return res
  110. }
  111. @Component({
  112. name: "dataForm",
  113. components: {uploadFiles, uploadImgs}
  114. })
  115. export default class extends Vue {
  116. rules = {
  117. bimTypeId: [{required: true, message: "请填写BIM构件编码", trigger: 'blur'}],
  118. systemCategory: [{required: true, message: "请填写系统分类", trigger: 'blur'}],
  119. codeName: [{required: true, message: "请填写设备类型名称", trigger: 'blur'}],
  120. localId: [{required: true, message: "请填写本地编码", trigger: 'blur'}],
  121. }
  122. // tabs数据
  123. activeName = 0
  124. header = {}
  125. form = {}
  126. paneMsg = []
  127. // 默认当前阶段
  128. currentHeader = ''
  129. @Prop({default: Object}) deviceHeaders ?: {}
  130. @Prop({default: Object}) currRowContent ?: {}
  131. @Watch('currRowContent', {immediate: true, deep: true})
  132. handleRow() {
  133. this.$nextTick(() => {
  134. // string =>array key
  135. this.form = {}
  136. this.form = Object.keys(this.currRowContent).length > 0 ? flattenKeys(this.currRowContent) : {}
  137. })
  138. }
  139. @Watch('deviceHeaders', {immediate: true, deep: true})
  140. changeHeaders() {
  141. this.$nextTick(() => {
  142. let pic = [], base = []
  143. if (typeof this.deviceHeaders == 'object' && Object.keys(this.deviceHeaders).length > 0) {
  144. this.paneMsg = this.deviceHeaders.dictStages.map(i => i.name)
  145. let currentHeader = this.paneMsg[0]
  146. this.currentHeader = this.currentHeader || currentHeader
  147. this.deviceHeaders.dictStages.length > 0 && this.deviceHeaders.dictStages.forEach(item => {
  148. if (this.currentHeader == item.name) {
  149. item.infos && item.infos.forEach(val => {
  150. if (val.dataType == 'ATTACHMENT') {
  151. pic.push(val)
  152. } else {
  153. base.push(val)
  154. }
  155. })
  156. }
  157. })
  158. }
  159. this.header = {
  160. basicInfos: {
  161. name: '基础信息台账',
  162. data: this.deviceHeaders.basicInfos
  163. },
  164. dictStages: {
  165. name: this.currentHeader,
  166. data: pic.length > 0 ? [...base, ...pic] : [...base]
  167. }
  168. }
  169. })
  170. }
  171. changeItem(val) {
  172. console.log(val)
  173. let _key = Object.keys(val)[0] + '';
  174. this.form[_key] = val[_key];
  175. }
  176. handleClick(val) {
  177. this.currentHeader = val.label
  178. this.changeHeaders()
  179. }
  180. submitForm(callback) {
  181. this.$refs.form.validate((valid) => {
  182. if (valid) {
  183. callback()
  184. } else {
  185. return false;
  186. }
  187. });
  188. }
  189. }
  190. </script>
  191. <style scoped lang="scss">
  192. $border: 1px solid #E1E7EA;
  193. .data-form {
  194. //.el-upload-dragger {
  195. // width: auto;
  196. // height: auto;
  197. //}
  198. .title {
  199. border-left: 7px solid;
  200. text-indent: 10px;
  201. color: #646C73;
  202. margin-bottom: 10px;
  203. }
  204. .content {
  205. .table {
  206. border-left: $border;
  207. border-right: $border;
  208. border-bottom: $border;
  209. height: calc(100% - 41px);
  210. padding: 12px;
  211. }
  212. }
  213. }
  214. </style>