jsm-mall-front/src/views/partsManagement/accessoryWebsite/website-old-parts-shop-refund/index.vue

<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :exportList="exportList"
    :columnParsing="columnParsing"
    :optionsEvensGroup="optionsEvensGroup"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
    <div class="cartographer_big">
      <el-dialog title="创建工单" width="100%" :modal="false" :visible.sync="formDialog" :before-close="formCancel">
        <zj-page-container>
          <zj-page-fill class="neibuview">
            <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
              <zj-form-module title="新增" label-width="90px" :form-data="formData" :form-items="formItems">
              </zj-form-module>
            </zj-form-container>
          </zj-page-fill>
          <!-- 操作按钮 -->
          <div class="dialog-footer" style="text-align: right; box-sizing: border-box; padding: 20px">
            <el-button size="mini" @click="formCancel">取 消</el-button>
            <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
          </div>
        </zj-page-container>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import {
  partsOldOutList,
  partsOldOutExport,
  partsOldOutAdd
} from '@/api/material-system/center/center-old-parts-shop-out'
import { getWebsit } from '@/api/customerManagement.js'
import { getGoodsList } from '@/api/auxiliaryFittings/auxiliarySalesReturnOrder'
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: { TemplatePage },
  mixins: [operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {},
      // 表格事件
      tableEvents: {},
      // 事物类型
      objectTypeList: [
        { label: '退旧件', value: '退旧件' },
        { label: '无件返回', value: '无件返回' },
        { label: '新件退库', value: '新件退库' }
      ],
      websitList: [],
      partsList: [],
      formDialog: false,
      formData: {
        objectType: '',
        objectTypeName: '',
        partsName: '',
        partsNumber: '',
        qty: '',
        applyNo: '',
        materialGroupName: '',
        remark: '',
        goodsStockUnit: '',
        voucherNo: '',
        totalNumber: 0,
        sendWebsitId: '',
        sendWebsitName: '',
        partsNumberName_: ''
      }
    }
  },
  computed: {
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                getWebsit({ type: 'C', status: true, queryPartsWebsit: true }).then(res => {
                  this.websitList = res.data.map(item => ({ label: item.name, value: item.websitId, ...item }))
                  this.formDialog = true
                })
              }
            })
          ]
        ]
      ]
    },
    formItems() {
      return [
        {
          name: 'el-select',
          md: 8,
          options: this.objectTypeList,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '事物类型',
            prop: 'objectType',
            rules: [{ required: true, message: '请选择', trigger: 'blur' }]
          },
          events: {
            change: val => {
              this.formData.partsNumber = ''
              this.formData.partsName = ''
              this.formData.partsNumberName_ = ''
              this.formData.materialGroupName = ''
              this.formData.goodsStockUnit = ''
              this.formData.totalNumber = ''
              if (val) {
                this.formData.objectTypeName = this.objectTypeList.find(item => item.value === val)?.label || ''
              } else {
                this.formData.objectTypeName = ''
              }
            }
          }
        },
        {
          name: 'el-select',
          md: 8,
          options: this.websitList,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '网点',
            prop: 'sendWebsitId',
            rules: [{ required: true, message: '请选择', trigger: 'blur' }]
          },
          events: {
            change: v => {
              var data = this.websitList.find(item => item.websitId === v)
              if (data) {
                this.formData.sendWebsitName = data?.name
              } else {
                this.formData.sendWebsitName = ''
              }
              this.getOptions(v)
            }
          }
        },
        {
          name: 'el-select',
          md: 8,
          options: this.partsList,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '配件名称',
            prop: 'partsNumber',
            rules: [{ required: true, message: '请选择', trigger: 'blur' }]
          },
          events: {
            change: async val => {
              if (val) {
                var item = this.partsList.find(item => item.value === val)
                if (item) {
                  this.formData.partsName = item?.label
                  this.formData.partsNumberName_ = val
                  this.formData.materialGroupName = item.data.materialGroupName
                  this.formData.goodsStockUnit = item.data.goodsStockUnit
                  this.formData.totalNumber = (() => {
                    if (!!~['新件退库'].indexOf(this.formData.objectType)) {
                      return item.data.qty
                    } else if (!!~['退旧件', '无件返回'].indexOf(this.formData.objectType)) {
                      return item.data.oldQty
                    } else {
                      return 0
                    }
                  })()
                  return
                }
              }
              this.formData.partsName = ''
              this.formData.partsNumberName_ = ''
              this.formData.materialGroupName = ''
              this.formData.goodsStockUnit = ''
              this.formData.totalNumber = 0
            }
          }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: { label: '配件编码', prop: 'partsNumberName_' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: { label: '物料组名称', prop: 'materialGroupName' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: { label: '单位名称', prop: 'goodsStockUnit' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: { placeholder: '请输入', type: 'number' },
          formItemAttributes: {
            label: '数量',
            prop: 'qty',
            rules: [
              { required: true, message: '请输入', trigger: 'blur' },
              {
                validator: (rule, value, callback) => {
                  if (value && value > this.formData.totalNumber) {
                    callback(new Error('值不能大于剩余数量'))
                  } else {
                    callback()
                  }
                },
                trigger: 'blur'
              }
            ]
          }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: { placeholder: '请输入', type: 'number', disabled: true },
          formItemAttributes: { label: '剩余数量', prop: 'totalNumber' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: { placeholder: '请输入' },
          formItemAttributes: { label: '申请单号', prop: 'applyNo' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: { placeholder: '请输入' },
          formItemAttributes: { label: '凭证号', prop: 'voucherNo' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: { placeholder: '请输入', type: 'textarea', rows: 3 },
          formItemAttributes: { label: '开单备注', prop: 'remark' }
        }
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList: partsOldOutList,
    // 列表导出函数
    exportList: partsOldOutExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 获取选择下拉
    getOptions(websitId) {
      if (websitId) {
        getGoodsList({
          type: 'P',
          websitId: websitId
        }).then(res => {
          this.partsList = res.data.map(item => ({ label: item.partsName, value: item.partsNumber, data: item }))
        })
      } else {
        this.partsList = []
      }
    },
    formCancel() {
      this.formData = {
        objectType: '',
        objectTypeName: '',
        partsName: '',
        partsNumber: '',
        partsNumberName_: '',
        qty: '',
        applyNo: '',
        materialGroupName: '',
        remark: '',
        goodsStockUnit: '',
        voucherNo: '',
        totalNumber: 0
      }
      this.$refs.formRef.$refs['inlineForm'].clearValidate()
      this.formDialog = false
    },
    formConfirm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          partsOldOutAdd([this.formData]).then(res => {
            this.$refs.pageRef.refreshList()
            this.$message({
              type: 'success',
              message: `添加成功!`
            })
            this.formCancel()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>