zfire-newmall-admin/src/views/salesPurchasing/goodsPurchasedStored/index.vue

<template>
  <template-page
    v-if="pageShow"
    ref="pageRef"
    :get-list="getList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :exportList="exportList"
    :operation="operation()"
    key="pageType"
  >
    <div slot="moreSearch">
      <el-radio-group v-model="pageType" size="mini" @input="changePageType">
        <el-radio-button label="list">列表</el-radio-button>
        <el-radio-button label="goodsder">商品明细</el-radio-button>
        <el-radio-button label="codeder">条码明细</el-radio-button>
      </el-radio-group>
      <br /><br />
    </div>
    <div class="cartographer_big">
      <el-dialog
        :title="formDialogTitles[formDialogType]"
        width="100%"
        :modal="false"
        :visible.sync="formDialog"
        :before-close="handleClose"
      >
        <zj-page-container>
          <zj-page-fill>
            <div style="box-sizing: border-box; padding: 20px 20px 0 20px">
              <zj-form-container ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
                <zj-form-module title="单据信息" label-width="100px" :form-data="formData" :form-items="formItems">
                </zj-form-module>
                <zj-form-module title="" label-width="100px" :form-data="formData" :form-items="formItems2">
                  <el-tabs slot="header" v-model="activeName">
                    <el-tab-pane label="商品信息" name="goodsInfo"></el-tab-pane>
                    <el-tab-pane v-if="formDialogType > 0 && joinCode" label="条码信息" name="codeInfo"></el-tab-pane>
                  </el-tabs>
                </zj-form-module>
                <zj-form-module
                  v-if="formData.isPlan"
                  title="计划单明细"
                  label-width="100px"
                  :form-data="formData"
                  :form-items="formItemsFeicTes"
                >
                </zj-form-module>
              </zj-form-container>
            </div>
          </zj-page-fill>
          <div v-if="activeName == 'goodsInfo'" style="text-align: right; box-sizing: border-box; padding: 16px 20px">
            <el-button v-if="formDialogType == 0" size="mini" type="primary" @click="save">保存</el-button>
            <el-button v-if="formDialogType == 1" size="mini" type="primary" @click="submit">提交</el-button>
            <el-button v-if="formDialogType == 3" size="mini" type="primary" @click="examine('OK')">审核通过</el-button>
            <el-button v-if="formDialogType == 3" size="mini" type="primary" @click="examine('FAIL')"
              >审核驳回</el-button
            >
          </div>
        </zj-page-container>
      </el-dialog>
    </div>

    <el-dialog title="计划单明细" :visible.sync="dialogVisible" width="1000px" :before-close="handleCloseTes">
      <div style="width: 960px; height: 680px">
        <template-page
          v-if="dialogVisible"
          ref="pageRefTes"
          :get-list="getListTes"
          :table-attributes="tableAttributesTes"
          :table-events="tableEventsTes"
        >
        </template-page>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingtianjia">确 定</el-button>
      </span>
    </el-dialog>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import {
  goodsPurchaseList,
  goodsPurchaseListExport,
  goodsPurchaseItemList,
  goodsPurchaseItemListExport,
  goodsPurchaseCodeList,
  goodsPurchaseCodeListExport,
  goodsPurchaseAdd,
  goodsPurchaseDetail,
  goodsPurchaseSubmit,
  goodsPurchaseConfirm,
  goodsPurchaseDel
} from '@/api/goodsPurchasedStored.js'
import { goodsPlanItemList } from '@/api/purchaseSchedule.js'
import form_ty from '../mixins/common_form'
import storage_table from '../mixins/storage_table'
import storage_goods from '../mixins/storage_goods'
import storage_codes from '../mixins/storage_codes'
import common from '../mixins/common_code'
import jihuamingxi from '../mixins/jihuamingxi'
import { delayPerform, firstPerform, intervalPerform, passivePerform, queuePerform } from 'js-perform-lock'
import { required, diyRequired } from '@/components/template/rules_verify.js'
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin, form_ty, storage_table, storage_goods, storage_codes, common, jihuamingxi],
  data() {
    return {
      dialogVisible: false,
      pageType: 'list',
      pageShow: true,
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      tableAttributesTes: {
        // 启用勾选列
        selectColumn: true,
        reserveSelection: true,
        'row-key': 'goodsPlanItemId'
      },
      tableEventsTes: {
        'selection-change': this.selectionChangeTes
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ['新增入库单', '编辑入库单', '入库单详情', '审核入库单'],
      formDialog: false,
      appraise_status: '',
      formData: {
        companyWechatId: '',
        companyWechatName: '',
        examineBy: '',
        examineTime: '',
        fileUrl: '',
        remark: '',
        status: '',
        submitBy: '',
        submitTime: '',
        totalAmount: 0,
        totalQty: 0,
        updateBy: '',
        updateTime: '',
        venderId: '',
        venderName: '',
        storageId: '',
        storageName: '',
        fileUrl: [],
        items: [],
        planItems: [],
        codeInfoList: [],
        isPlan: ''
      },
      activeName: 'goodsInfo',
      goods_material_id: '',
      joinCode: false,
      joinCodeText: JSON.parse(localStorage.getItem('greemall_user')).joinCode,
      logs: [],
      tesXuanXiang: []
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      if (this.pageType == 'list') {
        return [
          [
            [
              this.optionsEvensAuth('add', {
                click: () => {
                  this.openForm()
                  this.formDialog = true
                  this.joinCode = JSON.parse(localStorage.getItem('greemall_user')).joinCode === 'CODE'
                }
              })
            ]
          ]
        ]
      } else if (this.pageType == 'goodsder') {
        return []
      } else if (this.pageType == 'codeder') {
        return []
      }
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItemsFeicTes() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: 'planItems',
            'label-width': '0px',
            rules: this.formData.isPlan ? [...required] : []
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                {[
                  !!~[0, 1].indexOf(this.formDialogType) ? (
                    <div style="margin-bottom:10px">
                      <el-button
                        type="primary"
                        onClick={() => {
                          if (this.formData.venderId) {
                            this.dialogVisible = true
                            this.tesXuanXiang = []
                          } else {
                            this.$message({
                              dangerouslyUseHTMLString: true,
                              type: 'warning',
                              message: '请选择供应商',
                              duration: 5000
                            })
                          }
                        }}
                      >
                        添加
                      </el-button>
                    </div>
                  ) : null,
                  <zj-table
                    columns={this.teshumingxi}
                    tableData={this.formData.planItems}
                    tableAttributes={{
                      size: 'mini',
                      border: true
                    }}
                  />
                ]}
              </div>
            )
          }
        }
      ]
    }
  },
  watch: {
    pageType() {
      this.handleClose()
      this.pageShow = false
      this.$nextTick(() => {
        this.pageShow = true
      })
    },
    'formData.venderId'() {
      this.formData.planItems = []
    }
  },
  methods: {
    tishicuowu: new delayPerform(500).refactor(function (/**可接收参数**/) {
      if (this.logs) {
        var logs = Array.from(
          new Set(
            JSON.parse(JSON.stringify(this.logs)).map(item => {
              return `${item.index !== undefined ? '第' + (item.index + 1) + '行：' : ''}${item.errMsg}`
            })
          )
        )
        this.logs = []
        this.$message({
          dangerouslyUseHTMLString: true,
          type: 'warning',
          message: logs.join('<div/>'),
          duration: 5000
        })
      }
    }),

    getListTes(p, cb) {
      return goodsPlanItemList({
        ...p,
        params: [
          ...p.params,
          { param: 'a.vender_id', compare: '=', value: this.formData.venderId },
          { param: 'b.surplus_qty', compare: '>', value: '0' }
        ]
      })
    },

    handleCloseTes() {
      this.dialogVisible = false
    },

    selectionChangeTes(data) {
      this.tesXuanXiang = data
    },

    quedingtianjia() {
      this.tesXuanXiang.map(item => {
        if (!this.formData.planItems.find(v => v.goodsPlanItemId == item.goodsPlanItemId)) {
          this.formData.planItems.unshift({
            amount: '', //
            brandId: item.brandId,
            brandName: item.brandName,
            enginCode: item.enginCode,
            enginName: item.enginName,
            factoryNo: item.factoryNo,
            goodsMaterialId: item.goodsMaterialId,
            goodsMaterialName: item.goodsMaterialName,
            goodsPlanId: item.id,
            goodsPlanItemId: item.goodsPlanItemId,
            goodsPurchaseId: '', //
            goodsPurchasePlanItemId: '', //
            inStockQty: item.inStockQty,
            insideQty: '', //
            mainId: item.mainId,
            mainName: item.mainName,
            orderGoodsType: item.orderGoodsType,
            qty: item.qty,
            outQty: '', //
            partsQty: '', //
            price: '', //
            recQty: '', //
            retQty: '', //
            seriesName: item.seriesName,
            smallId: item.smallId,
            smallName: item.smallName,
            specsName: item.specsName,
            surplusQty: item.surplusQty,
            unit: item.unit
          })
        }
      })
      this.dialogVisible = false
    },

    changePageType() {
      this.goods_material_id = ''
    },
    // 列表请求函数
    getList(p, cb) {
      if (this.pageType == 'list') {
        return goodsPurchaseList(p)
      } else if (this.pageType == 'goodsder') {
        return goodsPurchaseItemList(p)
      } else if (this.pageType == 'codeder') {
        if (this.goods_material_id) {
          return goodsPurchaseCodeList({
            ...p,
            params: [...p.params, { param: 'b.goods_material_id', compare: '=', value: this.goods_material_id }]
          })
        } else {
          return goodsPurchaseCodeList(p)
        }
      }
    },
    // 列表导出函数
    exportList(...p) {
      if (this.pageType == 'list') {
        return goodsPurchaseListExport(...p)
      } else if (this.pageType == 'goodsder') {
        return goodsPurchaseItemListExport(...p)
      } else if (this.pageType == 'codeder') {
        return goodsPurchaseCodeListExport(...p)
      }
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 打开创建弹窗
    openForm() {
      this.isEditIndex = -1
      this.getGysList()
      this.getWarehouseList()
      this.getBaseList()
    },
    // 打开详情弹窗
    openDetailForm(row, type) {
      goodsPurchaseDetail({ id: row.id }).then(res => {
        Object.assign(this.formData, res.data, {
          fileUrl: res.data.fileUrl ? [{ url: res.data.fileUrl }] : [],
          items: res.data.items.map(item => ({ ...item, details: {} }))
        })
        this.joinCode = res.data.joinCode === 'CODE'
        this.formDialogType = type
        this.openForm()
        this.formDialog = true
      })
    },
    // 关闭弹窗
    handleClose() {
      this.$refs?.formRef?.resetFields()
      this.formData = this.$options?.data()?.formData
      this.formDialog = false
      this.formDialogType = 0
      this.activeName = 'goodsInfo'
      this.joinCode = false
    },
    // 操作按钮
    operation() {
      if (this.pageType == 'list') {
        return this.operationBtn({
          edit: {
            conditions: ({ row, index, column }) => {
              return row.status == 'SAVE'
            },
            click: ({ row, index, column }) => {
              this.openDetailForm(row, 1)
            }
          },
          del: {
            prompt: '是否确定删除',
            conditions: ({ row, index, column }) => {
              return row.status == 'SAVE'
            },
            click: ({ row, index, column }) => {
              goodsPurchaseDel({
                id: row.id
              }).then(res => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.$refs.pageRef.refreshList()
              })
            }
          },
          detail: {
            click: ({ row, index, column }) => {
              this.openDetailForm(row, 2)
            }
          },
          shenhe: {
            conditions: ({ row, index, column }) => {
              return row.status == 'WAIT'
            },
            click: ({ row, index, column }) => {
              this.openDetailForm(row, 3)
            }
          }
        })
      } else if (this.pageType == 'goodsder') {
        return this.operationBtn({
          codeDetail: {
            click: ({ row, index, column }) => {
              this.goods_material_id = row.goodsMaterialId
              this.pageType = 'codeder'
            }
          }
        })
      } else if (this.pageType == 'codeder') {
        return undefined
      }
    },
    // 保存
    save() {
      this.$refs.formRef.validateField(this.getVfyKey(this.isEditIndex), (valid, invalidFields, errLabels) => {
        if (valid && this.eidtItems()) {
          if (!this.formData.storageId && JSON.parse(localStorage.getItem('greemall_user')).joinCode != 'NO') {
            return this.$message({
              type: 'warning',
              message: '仓库不能为空'
            })
          }
          if (this.formData.isPlan) {
            try {
              this.formData.planItems.map((item, index) => {
                if (!item.recQty || item.recQty == 0) {
                  throw new Error('')
                }
              })
            } catch (error) {
              this.$message.warning('到货数量必须填写并且大于0')
              return false
            }
          }

          goodsPurchaseAdd({
            ...this.formData,
            items: this.formData.items.map((item, index) => ({ ...item, index: index + 1 })),
            fileUrl: this.formData.fileUrl.map(item => item.url).join(','),
            codeInfoList: undefined
          }).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.$refs.pageRef.refreshList()
            this.handleClose()
          })
        }
      })
    },
    // 提交
    submit() {
      goodsPurchaseSubmit({
        id: this.formData.id
      }).then(res => {
        this.$message({
          type: 'success',
          message: '提交成功'
        })
        this.handleClose()
        this.$refs.pageRef.refreshList()
      })
    },
    // 审核
    examine(type) {
      goodsPurchaseConfirm({
        id: this.formData.id,
        statusEnum: type
      }).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.handleClose()
        this.$refs.pageRef.refreshList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 20px 20px 0 20px;
}

::v-deep .teshudeshangchuananniu {
  color: #409eff !important;
}
</style>