drp-ui/src/views/purchase/MaterialClassDivision/add.vue

<template>
  <div id="addDivision">
    <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="1.5">
            <el-form-item label="物料分类编码">
              <el-input :disabled="disable"  size="small" style="width: 200px" readonly v-model="basicForm.materialClassify">
                <el-button slot="append" icon="el-icon-more" @click="chooseFourClass"></el-button>
              </el-input>
            </el-form-item>
         </el-col>

        <el-col :span="1.5">
            <el-form-item label="物料分类名称">
              <el-input
                v-model="basicForm.materialClassifyName"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="一级分类编码">
              <el-input
                v-model="basicForm.materialClassifyOne"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="一级分类名称">
              <el-input
                v-model="basicForm.materialClassifyOneName"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="二级分类名称">
              <el-input
                v-model="basicForm.materialClassifyTwoName"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="三级分类名称">
              <el-input
                v-model="basicForm.materialClassifyThreeName"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="四级分类名称">
              <el-input
                v-model="basicForm.materialClassifyFourName"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="物料编码">
              <el-input :disabled="disable" style="width: 200px" size="small" readonly v-model="basicForm.materialCode">
                  <el-button slot="append" icon="el-icon-more" @click="test01"></el-button>
              </el-input>
              <el-input v-show="false" style="width: 200px" size="small" v-model="basicForm.material"></el-input>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="物料名称">
              <el-input
                v-model="basicForm.materialName"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="生产厂家">
              <el-input
                v-model="basicForm.manufacturer"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="所属组织">
              <el-select
                    ref="organizations"
                    v-model="basicForm.org"
                    size="small"
                    style="width: 200px"
                    :disabled="disable"
                    clearable
                    @focus="chooseRefer('ORG_PARAM', true, '选择所属组织')"
                  >
                    <el-option
                      v-for="item in organizationsOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                </el-select>
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="订单员">
              <el-select
                  ref="staffs"
                  size="small"
                  style="width: 200px"
                  :disabled="disable"
                  v-model="basicForm.orderPersonal"
                  clearable
                  @focus="chooseRefer('CONTACTS_PARAM', true, '订单员')"
                >
                  <el-option
                    v-for="item in staffOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="订单部门">
              <el-input
                v-model="basicForm.orderDept"
                size="small"
                disabled
                style="width: 200px"
              />
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="采购员">
              <el-select
                  ref="staffs2"
                  size="small"
                  style="width: 200px"
                  :disabled="disable"
                  v-model="basicForm.buyer"
                  clearable
                  @focus="chooseRefer('CONTACTS_PARAM', true, '采购员')"
                >
                  <el-option
                    v-for="item in staff2Options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="采购部门">
              <el-input
                v-model="basicForm.puDept"
                size="small"
                disabled
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="同步状态">
              <el-input
                v-model="basicForm.sendStatus"
                size="small"
                disabled
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="备注">
              <el-input
                v-model="basicForm.remark"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>
      </el-row>
    </el-form>

    <div class="btn_group">
      <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="small" plain @click="save" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
      </el-col>
      <!-- <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button size="small" plain @click="back">返回</el-button>
      </el-col>
    </div>

    <fourClass
      ref="fourClass"
      @doSubmit="acceptFourClass"
      :single="true"
    />

    <popDialog
      ref="contractSelect"
      @doSubmit="selectionsToInput"
      :single="true"
    />

    <Refers ref="refer" @doSubmit="selectionsRefer" :single="true"/>

    <staff2
      ref="staff2"
      @doSubmit="acceptStaff2"
      :single="true"
    />
  </div>
</template>

<script>
import {addDivision, getDivisions, editDivision} from '@/api/purchase/basic.js'
// 物料分类
import fourClass from '@/components/PopDialog/fourClass.vue'
// 调用物料分类详情接口用于数据回显
import { getDetail } from '@/api/classify/basic';
// 物料编码
import popDialog from '@/components/PopDialog/index.vue'
// 公用一个树形(组织部门传值不同)
import Refers from '@/components/Refers/refers.vue'
// 用于回显参照框数据
import { getRefer } from '@/api/purchase/basic.js'
import staff2 from '@/components/PopDialog/staff.vue'
// 所属组织,订单员用于回显
import { getOrgs, getStaff} from '@/api/requisition/basic'
export default {
  name: 'addDivision',
  components: {
    fourClass,
    popDialog,
    Refers,
    staff2
  },
  props: ['pageStu','row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      basicForm: {
        materialClassify: '',
        materialClassifyName: '',
        materialClassifyOne: '',
        materialClassifyOneName: '',
        materialClassifyTwoName: '',
        materialClassifyThreeName: '',
        materialClassifyFourName: '',
        material: '',
        materialCode: '',
        materialName: '',
        manufacturer: '',
        org: '',
        orgName: '',
        orderPersonal: '',
        orderPersonalName: '',
        orderDept: '',
        orderDeptName: '',
        buyer: '',
        buyerName: '',
        puDept: '',
        puDeptName: '',
        sendStatus: '',
        remark: ''
      },
      options: [{
        value: 0, label: '仓库1'
      }],
      referCondition: {
        type: '',
        isPage: true,
        title: ''
      },
      organizationsOptions: [],
      staffOptions: [],
      staff2Options: [],
      basicRules: {}
    }
  },
  mounted() {
    if(this.pageStu == 'check') {
      console.log('数据', this.row)
      this.getDetails(this.row)
    } else if(this.pageStu == 'edit') {
      this.getDetails(this.row)
    }
  },
  methods: {
    save() {
      if(this.pageStu == 'add') {
        addDivision(this.basicForm).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("保存成功");
            this.back()
          }
        })
      } else if(this.pageStu == 'edit') {
        editDivision(this.basicForm).then(res => {
          this.$modal.msgSuccess("编辑成功");
          this.back()
        })
      }
    },
    submit() {},
    back() {
      this.$emit('jugislist', true)
      let queryParams = {
        pageNum: 1,
        pageSize: 5
      }
      this.$emit('refresh', queryParams)
    },
    // 如果需要回显则调用详情接口
    getDetails(row) {
      getDivisions(row.id).then(res => {
        if (res.code === 200) {
          this.basicForm = res.data
          if (this.basicForm.org) { this.reBackRefer('ORG_PARAM', this.basicForm.org) }
          if (this.basicForm.orderPersonal) { this.reBackRefer('CONTACTS_PARAM', this.basicForm.orderPersonal, '订单员') }
          if (this.basicForm.buyer) { this.reBackRefer('CONTACTS_PARAM', this.basicForm.buyer, '采购员') }
          // this.getOrgDetails(res.data.org)
          // this.getStaffDetails(res.data.orderPersonal)
          // this.getStaffDetails2(res.data.buyer)
        }
      })
    },
    // 选择物料分类
    acceptFourClass(selections) {
      console.log('收到的四级分类',selections)
      this.basicForm.materialClassify = selections.code
      this.basicForm.materialClassifyName = selections.materialType
      this.getTreeDetails(selections.id)
    },
    // 物料分类显示列表
    chooseFourClass() {
      this.$refs.fourClass.init()
    },
    // 选择物料分类后需要根据id再次查询一下123级分类
    getTreeDetails(id) {
      getDetail(id).then(res => {
        if (res.code === 200) {
          this.basicForm.materialClassifyOneName = res.data.oneClass
          this.basicForm.materialClassifyTwoName = res.data.twoClass
          this.basicForm.materialClassifyThreeName = res.data.threeClass
          this.basicForm.materialClassifyFourName = res.data.fourClass
        }
      })
    },
    selectionsToInput (selections) {
      console.log('父组件拿到的：', selections)
      this.selectData = selections
      this.basicForm.material = selections[0].id
      this.basicForm.materialCode = selections[0].code
      this.basicForm.materialName = selections[0].name
    },
    // 显示物料编码列表
    test01() {
      console.log('测试点击')
      this.$refs.contractSelect.init()
    },
    // 选择默认采购组织
    chooseRefer(type, isPage, title) {
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.refer.init(this.referCondition)
    },
    selectionsRefer(selection) {
      if (this.referCondition.title == '选择所属组织') {
        this.organizationsOptions = selection
        this.basicForm.org = selection[0].id
        this.basicForm.orgName = selection[0].name
      }
      if (this.referCondition.title == '订单员') {
        this.staffOptions = selection
        this.basicForm.orderPersonal = selection[0].code
        this.basicForm.orderPersonalName = selection[0].name
      }
      if (this.referCondition.title == '采购员') {
        this.staff2Options = selection
        this.basicForm.buyer = selection[0].code
        this.basicForm.buyerName = selection[0].name
      }
    },
    // 回显参照框
    reBackRefer(type, id, title) {
      getRefer({ type: type, id: id }).then(res => {
        if (type == 'ORG_PARAM') {
          this.organizationsOptions = res.rows
        }
        if (type == 'CONTACTS_PARAM' && title == '订单员') {
          this.staffOptions = res.rows
        }
        if (type == 'CONTACTS_PARAM' && title == '采购员') {
          this.staff2Options = res.rows
        }
      })
    },
    // 选择订单员
    // acceptStaff (selections) {
    //   this.staffOptions = selections
    //   this.basicForm.orderPersonal = selections[0].code
    //   this.basicForm.orderPersonalName = selections[0].name
    //   this.getStaffDetails(selections[0].id)
    // },
    // // 订单员显示列表
    // chooseStaff () {
    //   this.$refs.staffs.blur()
    //   this.$refs.staff.init()
    // },
    // // 订单员回显
    // getStaffDetails(id) {
    //   getStaff({id:id}).then(res => {
    //     console.log('订单员', res)
    //     if (res.code === 200 ) {
    //       this.staffOptions = res.data.tableBody
    //     }
    //   })
    // },
    // 选择采购员
    acceptStaff2 (selections) {
      this.staff2Options = selections
      this.basicForm.buyer = selections[0].code
      this.basicForm.buyerName = selections[0].name
      this.getStaffDetails2(selections[0].id)
    },
    // 采购员显示列表
    chooseStaff2 () {
      this.$refs.staffs2.blur()
      this.$refs.staff2.init()
    },
    // 采购员回显
    getStaffDetails2(id) {
      getStaff({id:id}).then(res => {
        console.log('采购员', res)
        if (res.code === 200 ) {
          this.staff2Options = res.data.tableBody
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.btn_group {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
} 
</style>