hitch-sb-antd/src/views/idle-assets/modules/BaseForm.vue

<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-card >
      <a-form :form="form">
        <row-list :col="1" v-show="false">
          <row-item>
            <a-form-item>
              <a-input v-decorator="['id']" type="hidden"/>
            </a-form-item>
          </row-item>
        </row-list>
        <row-list :col="2">
          <row-item >
            <a-form-item
              label="审核人"
              :labelCol="BaseTool.Constant.labelCol"
              :wrapperCol="BaseTool.Constant.wrapperCol"
            >
              <a-select :disabled="title=='编辑'" v-decorator="['verityUserId', { rules: [{required: true, message: '审核人不能为空'}]}]" placeholder="请选择">
                <a-select-option
                  v-for="{userId,realName} in verityUserIdMap"
                  :key="userId"
                  :label="realName"
                  :value="userId">{{ realName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </row-item>
          <row-item>
            <a-form-item
              label="备注"
              :labelCol="BaseTool.Constant.labelCol"
              :wrapperCol="BaseTool.Constant.wrapperCol"
            >
              <a-input v-decorator="['name', { rules: [{required: true, message: '备注不能为空'}]}]" placeholder="请填写备注" />
            </a-form-item>
          </row-item>
        </row-list>

      </a-form>
      <title-divider title="设备集合" width="90px"></title-divider>
      <a-button type="primary" @click="handleSbSelect">选择</a-button>
      <br>
      <br>
      <a-table
        :columns="columns"
        bordered
        :data-source="sbInfoDTOS"
      >
        <span slot="action" slot-scope="record">
          <a @click="handleDelete(record)">删除</a>
          <operation-button
            @click="handleUpLoad(record)"
          >上传图片</operation-button>
        </span>
      </a-table>
    </a-card>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
    <sb-info-select-modal v-if="visible" ref="sbInfoSelectModal" @selected="handleSbSelectd"/>
    <UpLoad ref="upLoad" />
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addSbUnused, getUnusedUsers, updataSbUnused } from '@/api/idle-assets/idle-assets'
import SbInfoSelectModal from './SbInfoSelectModal'
import UpLoad from './UpLoad'

export default {
  name: 'BaseForm',
  components: {
    SbInfoSelectModal,
    UpLoad
  },
  data () {
    return {
      form: this.$form.createForm(this),
      visible: false,
      title: '新增',
      modal: {},
      verityUserIdMap: [],
      sbInfoDTOS: [],
      confirmLoading: false,
      columns: [
        {
          title: '设备名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '设备位号',
          dataIndex: 'positionNo',
          key: 'positionNo'
        },
        {
          title: '设备编号',
          dataIndex: 'no',
          key: 'no'
        },
        {
          title: '操作',
          key: 'action',
          width: '200px',
          fixed: 'right',
          checked: true,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },

  created () {
    // this.flagMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PROJECT_NEW_AND_OLD)
    this.getUnusedUsers()
  },
  methods: {
    base (record) {
      this.visible = true
      if (this.BaseTool.Object.isBlank(record)) {
        this.title = '新增'
        return
      }
      this.title = '编辑'
      this.modal = record
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'name',
          'verityUserId'
        ])))
      })
      this.sbInfoDTOS = record.sbUnusedDetailVOS.map(item => {
        return {
          id: item.sbId,
          sbUnusedDetailId: item.id,
          name: item.sbName,
          no: item.sbNo,
          sbFileList: item.usedFileList,
          positionNo: item.positionNo
        }
      })
    },
    getUnusedUsers () {
      getUnusedUsers().then(res => {
        this.verityUserIdMap = res.data
      })
    },

    handleSbSelect () {
      this.$refs.sbInfoSelectModal.base()
    },
    handleSbSelectd (rows) {
      const sbInfoDTOS = rows.map(item => {
        if (this.sbInfoDTOS.length > 0 && this.sbInfoDTOS.find(sb => sb.id === item.id)) {
          return
        }
        return {
          id: item.id,
          name: item.name,
          no: item.no,
          positionNo: item.positionNo,
          sbFileList: []
        }
      })
      this.sbInfoDTOS = [...sbInfoDTOS, ...this.sbInfoDTOS].filter(item => item)
    },
    handleUpLoad (record) {
      this.$refs.upLoad.base(record)
    },
    handleUpLoadOk () {

    },
    handleDelete (record) {
      this.sbInfoDTOS = this.sbInfoDTOS.filter(item => item.id !== record.id)
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      // this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          Object.values(errors).map(item => {
            this.$message.error(item.errors[0].message)
          })
          this.confirmLoading = false
          return
        }
        values.sbInfoDTOS = this.sbInfoDTOS
        if (values.id) {
          values.saveFlag = true
          updataSbUnused(values).then(res => {
            this.$message.success('修改成功！')
            this.handleCancel()
          })
        } else {
          addSbUnused(values).then(res => {
            this.$message.success('创建成功！')
            this.handleCancel()
          })
        }
      })
    },
    handleCancel (values) {
      this.visible = false
      this.modal = {}
      this.sbInfoDTOS = []
      this.form.resetFields()
      this.$emit('ok', values)
    }

  }
}
</script>
<style lang="less" scoped>
.tooltip{
  font-size:20px;
  color:#ccc;
  &:hover {
  color:#2f54eb;
  }
}
</style>