dataForm.vue 9.1 KB

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