gj-supply-front/src/views/commercialEngineering/components/model.vue

<template>
  <div>
    <h3>{{ title }}</h3>
    <el-divider />
    <div style="margin-bottom: 20px; width: 80px">
      <el-button v-if="!['detail', 'examine'].includes(module)" type="primary" size="small" @click="handleAdd"
        >添加机型</el-button
      >
    </div>
    <zj-table
      ref="tableEl"
      :is-drop="true"
      :columns="columns"
      :table-data="formData.items"
      :table-attributes="{
        border: true,
        maxHeight: 600
      }"
    />
    <el-dialog title="添加机型" append-to-body :visible.sync="isShowDialog" width="70%" :append-to-body="true">
      <el-form ref="screenForm" :model="screenForm" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="name">
              <el-input v-model="screenForm.name" placeholder="物料名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="number">
              <el-input v-model="screenForm.number" placeholder="物料编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="oldNumber">
              <el-input v-model="screenForm.oldNumber" placeholder="产品编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="specification">
              <el-input v-model="screenForm.specification" placeholder="规格型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24" class="tr">
            <el-form-item label="">
              <el-button size="small" @click="resetScreenForm">清空</el-button>
              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="table">
        <zj-table
          ref="tableEl"
          :is-drop="true"
          :columns="columns2"
          :table-data="k3List"
          :table-attributes="{
            border: true,
            selectColumn: true,
            selectable: this.selectable

          }"
          :tableEvents ="{
              'selection-change': this.selectionChange
            }"
        />
        <div class="pagination clearfix" style="margin-top: 10px">
          <div class="fr">
            <el-pagination
              @current-change="handleTableCurrentChange"
              :current-page="currentPage"
              :page-size="10"
              background
              layout="prev, pager, next"
              :total="listTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitAddGoods">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialListV2 } from '@/api/basic_data/material'

export default {
  props: {
    title: {
      type: String,
      default: '机型信息'
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    // 页面类型
    pageType: {
      type: String,
      default: 'frock'
    },
    // 功能类型
    module: {
      type: String,
      default: 'add'
    },
    commonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      k3List: [],
      isShowDialog: false,
      currentPage: 1,
      pageSize: 10,
      listTotal: 0,
      screenForm: {
        name: '',
        oldNumber: '',
        number: '',
        specification: ''
      },
      recordSelected: []
    }
  },
  computed: {
    columns() {
      return [
        ...(() => {
          return !['detail', 'examine'].includes(this.module)
            ? [
                {
                  hidden: '',
                  columnAttributes: {
                    fixed: 'left',
                    label: '操作',
                    prop: ''
                  },
                  render: (h, { row, column, index }) => {
                    return (
                      <div>
                        <el-button
                          size="mini"
                          type="text"
                          onClick={() => {
                            this.formData.items.splice(index, 1)
                          }}
                        >
                          删除
                        </el-button>
                      </div>
                    )
                  }
                }
              ]
            : []
        })(),
        {
          columnAttributes: {
            label: '物料名称*',
            prop: 'materialName'
          },
          render: (h, { row, column, index }) => {
            return (
              <div style="display:flex;justify-content: space-between;align-items: center;">
              <div> {row.materialName}</div>
              <CopyButton copyText={row.materialName} />
            </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '规格型号*',
            prop: 'specification'
          },
          render: (h, { row, column, index }) => {
            return (
             <div style="display:flex;justify-content: space-between;align-items: center;">
              <div> {row.specification}</div>
              <CopyButton copyText={row.specification} />
             </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '备注',
            prop: 'itemRemark'
          },
          render: (h, { row, column, index }) => {
            return (
             <div>
               <el-input
                style="padding: 5px;width:90%"
                value={row.itemRemark}
                onInput={e => (row.itemRemark = e)}
                placeholder="请输入备注"
                size="mini"
                clearable
              >
              </el-input>
              <CopyButton copyText={row.itemRemark} />

             </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '数量*',
            prop: 'qty'
          },
          render: (h, { row, column, index }) => {
            return (
              <el-input
                style="padding: 5px;"
                type="number"
                value={row.qty}
                placeholder="请输入数量"
                min={1}
                onInput={e => (row.qty = e)}
                size="mini"
                clearable
              ></el-input>
            )
          }
        }
      ]
    },
    columns2() {
      return [
        {
          columnAttributes: {
            label: '物料名称',
            prop: 'name',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '物料编码',
            prop: 'number',
            width: 100
          }
        },
        {
          columnAttributes: {
            label: '旧物料编码',
            prop: 'oldNumber',
            width: 100
          }
        },
        {
          columnAttributes: {
            label: '规格型号',
            prop: 'specification'
          }
        }
      ]
    }
  },

  methods: {
    getMaterialListV2() {
      const params = []
      Object.keys(this.screenForm).forEach(k => {
        if (this.screenForm[k]) {
          params.push({
            param: `a.${k}`,
            compare: 'like',
            value: this.screenForm[k]
          })
        }
      })
      getMaterialListV2({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        params
      }).then(res => {
        this.k3List = res.data.records
        this.listTotal = res.data.total
        this.loading = false
      })
    },
    remoteMethod(query, type, name) {
      if (query !== '') {
        this.loading = true
        getMaterialListV2({
          pageNum: 1,
          pageSize: 100,
          params: [
            {
              param: `a.${type}`,
              compare: 'like',
              value: query
            }
          ]
        }).then(res => {
          this.k3List = res.data.records
          this.loading = false
        })
      } else {
        this.k3List = []
      }
    },
    setCheckeData(e, row) {
      if (e) {
        const item = this.k3List.find(k => k.id === e)
        row.specification = item.specification
        row.materialName = item.name
        row.materialId = item.id
        row.materialOldNumber = item.oldNumber
      } else {
        row.specification = ''
        row.materialName = ''
        row.materialId = ''
        row.materialOldNumber = ''
      }
    },
    handleAdd() {
    this.getMaterialListV2()
      this.isShowDialog = true
      // this.formData.items.push({
      //   id: '',
      //   itemRemark: '',
      //   materialId: '',
      //   materialName: '',
      //   materialNumber: '',
      //   materialOldNumber: '',
      //   orderId: '',
      //   projectNo: '',
      //   qty: null,
      //   specification: '',
      //   unit: ''
      // })
    },
    selectable(row,index){
      for (let i = 0; i < this.formData.items.length; i++) {
          if (this.formData.items[i].materialId == row.id) {
            row.disabled = true
          }
      }

      if(row.disabled){
        return false
      }else{
        return true
      }
    },
     // 监听勾选变化
     selectionChange(data) {
      this.recordSelected = data
    },
    closeDialog() {
      this.isShowDialog = false
    },
    submitAddGoods() {
      this.formData.items =[ ...this.formData.items,  ...this.recordSelected.map(k=>{
        return {
        qty: null,
        unit: '',
        orderId: '',
        projectNo: '',
        itemRemark: '',
        specification : k.specification,
        materialName : k.name,
        materialId : k.id,
        materialOldNumber : k.oldNumber,
        }
      })]
      this.k3List= []
      this.isShowDialog = false
    },
    // 更改列表当前页
    handleTableCurrentChange(val) {
      this.currentPage = val
      this.getMaterialListV2()
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getMaterialListV2()
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getMaterialListV2()
    }
  }
}
</script>

<style lang="scss" scoped></style>