hitch-sb-antd/src/views/sb/info/modules/BackForm.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="1300"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-button icon="plus" type="primary" @click="$refs.sbSelect.base()">选择设备</a-button>
    <br>
    <br>
    <a-table
      bordered
      :data-source="dataList"
      :columns="columns"
      :scroll="{x: 1300, y: BaseTool.Constant.scrollY}"
    >
      <span slot="status" slot-scope="text">
        <badge :status="DictCache.COLOR.SB_INFO_STATUS[text]" :text="statusMap[text]" />
      </span>
    </a-table>
    <br>
    <a-form :form="form">
      <row-list :col="2">
        <row-item>
          <a-form-item
            label="设备位置"
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol2"
          >
            <a-tree-select
              style="width: 100%"
              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
              :treeData="treeData"
              :treeNodeFilterProp="'title'"
              :showSearch="true"
              v-decorator="['positionId', {rules: [{required: true, message: '设备位置不能为空'}]}]"
              placeholder="请选择">
            </a-tree-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="备注"
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol2"
          >
            <a-textarea
              :rows="4"
              v-decorator="['remark']"/>
          </a-form-item>
        </row-item>
      </row-list>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
    <SbInfoSelectModal ref="sbSelect" @selected="handleSelected" />
  </a-modal>
</template>

<script>
import { batchBack, batchOut } from '@/api/repair/application-form'
import SbInfoSelectModal from './SbInfoSelectModal2.vue'
import { getSbPositionTree } from '@/api/sb/position'
export default {
  name: 'BackForm',
  components: {
    SbInfoSelectModal
  },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      // 下拉框map
      sbIds: [],
      dataList: [],
      treeData: [],
      columns: [
        {
          title: '状态',
          checked: true,
          dataIndex: 'status',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '父位号',
          dataIndex: 'no',
          width: 100,
          checked: true
        },
        {
          title: '设备名称',
          checked: true,
          dataIndex: 'name',
          width: 150
        },
        {
          title: '规格、型号',
          dataIndex: 'model',
          width: 150,
          checked: true
        },
        {
          title: '出厂编号',
          dataIndex: 'zzh',
          width: 100,
          checked: true
        },
        {
          title: '管理编号',
          dataIndex: 'positionNo',
          width: 120,
          checked: true
        }
      ],
      status: 0,
      type: 1,
      statusMap: {}
    }
  },
  props: {
  },
  created () {
    // 下拉框map
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_INFO_STATUS)
    getSbPositionTree().then((res) => {
      this.treeData = res.data
    })
  },
  methods: {
    base (status, type) {
      this.visible = true
      // 如果是空标识添加
      this.modalTitle = this.statusMap[status]
      this.status = status
      this.type = type
      this.dataList = []
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        values.sbIds = this.dataList.map((value) => value.id)
        values.status = this.status
        if (this.type === 1) {
          batchBack(values).then(res => {
            this.confirmLoading = false
            this.handleCancel()
          })
        } else {
          batchOut(values).then(res => {
            this.confirmLoading = false
            this.handleCancel()
          })
        }
      })
    },
    handleSelected (keys, rows) {
      rows.forEach((item) => {
        if (!this.dataList.map((company) => company.id).includes(item.id)) {
          this.dataList.push(item)
        }
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      this.$emit('ok', values)
    }
  }
}
</script>