123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- <template>
- <el-row :gutter="20" class="data-form">
- <el-form label-position="top" ref="form" label-width="300px" :model="form" :rules="rules">
- <template v-if="Object.keys(header).length > 0">
- <p class="title">基础信息</p>
- <el-row :gutter="18">
- <el-col :span="8" :key="item.path" v-for="item in header.basicInfos.data">
- <el-form-item
- :prop="item.path"
- :label="item.name">
- <el-input v-model="form[item.path]"/>
- </el-form-item>
- </el-col>
- </el-row>
- <div class="content">
- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
- <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item"
- :name="index.toString()"/>
- </el-tabs>
- <div class="table" style="height: 200px;overflow: auto">
- <el-row :gutter="18">
- <el-col :span="item.dataType == 'ATTACHMENT'? 24:8"
- :key="item.path"
- v-for="item in header.dictStages.data"
- :style="{ 'height':item.dataType == 'ATTACHMENT'? 'auto':'93px' }"
- >
- <el-form-item :label="item.name">
- <el-input
- :disabled="!item.editable"
- v-if="item.dataType == 'STRING'"
- v-model="form[item.path]"/>
- <el-input
- v-else-if="item.dataType == 'DOUBLE' || item.dataType == 'INTEGER'"
- type="number"
- v-model="form[item.path]">
- <template slot="append" v-if="item.unit">{{ item.unit }}</template>
- </el-input>
- <el-select
- v-else-if="item.dataType == 'MENUM'"
- placeholder="请选择"
- v-model="form[item.path]"
- multiple
- collapse-tags>
- <el-option :key="index" :label="op.name" :value="op.code"
- v-for="(op,index) in item.dataSource"></el-option>
- </el-select>
- <el-select
- v-else-if="item.dataType == 'ENUM' || item.dataType == 'BOOLEAN'"
- placeholder="请选择"
- v-model="form[item.path]">
- <el-option :key="index" :label="op.name" :value="op.code"
- v-for="(op,index) in item.dataSource"></el-option>
- </el-select>
- <el-date-picker
- v-else-if="item.dataType == 'DATETIME'"
- v-model="form[item.path]"
- placeholder="选择日期"
- type="date">
- </el-date-picker>
- <uploadImgs
- v-else-if="item.dataType == 'ATTACHMENT'&& item.path === 'infos.Pic'"
- :readOnly="false"
- v-model="form[item.path]"
- :keysArr="Array.isArray(form[item.path]) ? form[item.path]:[]"
- :context-key="item.path"
- :isShow="1"
- @change="changeItem"/>
- <uploadFiles
- v-else-if="item.dataType == 'ATTACHMENT'"
- v-model="form[item.path]"
- :readOnly="false"
- :isShow="1"
- :keys-arr="Array.isArray(form[item.path]) ? form[item.path]:[] "
- :show-file-list="false"
- :context-key="item.path"
- @change="changeItem"/>
- </el-form-item>
- </el-col>
- </el-row>
- </div>
- </div>
- </template>
- </el-form>
- </el-row>
- </template>
- <script lang="ts">
- import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
- import uploadFiles from "@/components/public/uploadFiles.vue";
- import uploadImgs from "@/components/public/uploadImgs.vue";
- function flattenKeys(obj: any) {
- let res = {}
- function isObject(val: any) {
- return typeof val === 'object' && !Array.isArray(val)
- }
- function digKeys(prev: any, obj: any) {
- Object.entries(obj).forEach(([key, value]) => {
- const currentKey = prev ? `${ prev }.${ key }` : key
- if (isObject(value)) {
- digKeys(currentKey, value)
- } else {
- res[currentKey] = value
- }
- })
- }
- digKeys('', obj)
- return res
- }
- @Component({
- name: "dataForm",
- components: { uploadFiles, uploadImgs }
- })
- export default class extends Vue {
- rules = {
- bimTypeId: [{ required: true, message: "请填写BIM构件编码", trigger: 'blur' }],
- systemCategory: [{ required: true, message: "请填写系统分类", trigger: 'blur' }],
- codeName: [{ required: true, message: "请填写设备类型名称", trigger: 'blur' }],
- localId: [{ required: true, message: "请填写本地编码", trigger: 'blur' }],
- }
- // tabs数据
- activeName = ""
- header = {}
- form = {}
- paneMsg = []
- // 默认当前阶段
- currentHeader = ''
- @Prop({ default: Object }) deviceHeaders ?: {}
- @Prop({ default: Object }) currRowContent ?: {}
- @Watch('currRowContent', { immediate: true, deep: true })
- handleRow() {
- this.$nextTick(() => {
- // string =>array key
- this.form = {}
- this.form = Object.keys(this.currRowContent).length > 0 ? flattenKeys(this.currRowContent) : {}
- })
- }
- @Watch('deviceHeaders', { immediate: true, deep: true })
- changeHeaders() {
- this.$nextTick(() => {
- let pic = [], base = []
- if (typeof this.deviceHeaders == 'object' && Object.keys(this.deviceHeaders).length > 0) {
- this.paneMsg = this.deviceHeaders.dictStages.map(i => i.name)
- let currentHeader = this.paneMsg[0]
- this.currentHeader = this.currentHeader || currentHeader
- this.deviceHeaders.dictStages.length > 0 && this.deviceHeaders.dictStages.forEach(item => {
- if (this.currentHeader == item.name) {
- item.infos && item.infos.forEach(val => {
- if (val.dataType == 'ATTACHMENT') {
- pic.push(val)
- } else {
- base.push(val)
- }
- })
- }
- })
- }
- this.header = {
- basicInfos: {
- name: '基础信息台账',
- data: this.deviceHeaders.basicInfos
- },
- dictStages: {
- name: this.currentHeader,
- data: pic.length > 0 ? [...base, ...pic] : [...base]
- }
- }
- })
- }
- changeItem(val) {
- console.log(val)
- let _key = Object.keys(val)[0] + '';
- this.form[_key] = val[_key];
- }
- handleClick(val) {
- this.currentHeader = val.label
- this.changeHeaders()
- }
- submitForm(callback) {
- this.$refs.form.validate((valid) => {
- if (valid) {
- callback()
- } else {
- return false;
- }
- });
- }
- }
- </script>
- <style scoped lang="scss">
- $border: 1px solid #E1E7EA;
- .data-form {
- //.el-upload-dragger {
- // width: auto;
- // height: auto;
- //}
- .title {
- border-left: 7px solid;
- text-indent: 10px;
- color: #646C73;
- margin-bottom: 10px;
- }
- .content {
- .table {
- border-left: $border;
- border-right: $border;
- border-bottom: $border;
- height: calc(100% - 41px);
- padding: 12px;
- }
- }
- }
- </style>
|