石广澎
2023-12-12 fa3a13b43cdcd3bcc42abae4d9c0a67e48ebea41
admin-web/src/views/stock/procure/purchaseOrder/edit.vue
@@ -1,24 +1,25 @@
<template>
  <win-md class="stock-edit" :title="`${setting.title}采购入库`" @close="close" :width="'800px'" :loading="loading">
    <el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
    <el-form v-loading="loading" class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
      <div class="main-w">
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="入库仓库" prop="warehouseId">
              <el-select v-model="formData.warehouseId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in warehouses" :key="item.id" :label="item.warehouseName" :value="item.id" />
              <el-select v-model="formData.warehouseId" placeholder="请选择" clearable style="width: 100%">
                <el-option v-for="item in warehouses" :key="item.id" :label="item.warehouseName" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购时间" prop="procureTime">
              <el-date-picker
                v-model="formData.procureTime"
                type="datetime"
                value="yyyy-MM-dd HH:mm:ss"
                value-format="yyyyMMddHHmmss"
                placeholder="请选择日期"
                style="width: 100%"
                  v-model="formData.procureTime"
                  type="datetime"
                  clearable
                  value="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyyMMddHHmmss"
                  placeholder="请选择日期"
                  style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
@@ -28,7 +29,7 @@
          <el-col :span="12">
            <el-form-item label="采购类型" prop="buyType">
              <el-select v-model="formData.buyType" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in buyTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                <el-option v-for="item in buyTypeOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
@@ -44,42 +45,46 @@
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="物品分类"
                :prop="`procureGoods[${goodsIndex}].baseCategoryIds`"
                :rules="{
                  label="物品分类"
                  :prop="`procureGoods.${goodsIndex}.baseCategoryId`"
                  :rules="{
                  required: true,
                  message: '请选择',
                  message: '请选择物品分类',
                  trigger: 'change',
                }"
              >
                <el-cascader
                  v-model="goodsItem.baseCategoryIds"
                  :options="categoryOptions"
                  :props="{ value: 'id' }"
                  @change="categoryChange($event, goodsIndex)"
                  style="width: 100%"
                    v-model="goodsItem.baseCategoryId"
                    :options="categoryOptions"
                    :props="{ value: 'id',emitPath: false }"
                    :show-all-levels="false"
                    filterable
                    clearable
                    @change="categoryChange($event, goodsIndex)"
                    style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="物品名称"
                :prop="`procureGoods[${goodsIndex}].baseGoodsTemplateId`"
                :rules="rules.baseGoodsTemplateId"
                  label="物品名称"
                  :prop="`procureGoods.${goodsIndex}.baseGoodsTemplateId`"
                  :rules="rules.baseGoodsTemplateId"
              >
                <el-select
                  v-model="goodsItem.baseGoodsTemplateId"
                  placeholder="请先择物品分类"
                  filterable
                  :disabled="!goodsItem.baseCategoryId"
                  style="width: 100%"
                  @change="goodsTemplateChange($event, goodsIndex)"
                    v-model="goodsItem.baseGoodsTemplateId"
                    :placeholder="goodsItem.baseCategoryId?'请选择物品':'请先选择物品分类'"
                    filterable
                    clearable
                    :disabled="!goodsItem.baseCategoryId"
                    style="width: 100%"
                    @change="goodsTemplateChange($event, goodsIndex)"
                >
                  <el-option
                    v-for="item in goodsItem.goodsOptions"
                    :key="item.id"
                    :label="item.goodsName"
                    :value="item.id"
                      v-for="item in goodsItem.goodsOptions"
                      :key="item.id"
                      :label="item.goodsName"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
@@ -88,35 +93,37 @@
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="规格型号"
                :prop="`procureGoods[${goodsIndex}].modelsIds`"
                :rules="{
                  label="规格型号"
                  :prop="`procureGoods.${goodsIndex}.modelsIds`"
                  :rules="{
                  required: true,
                  message: '请选择',
                  message: '请选择规格型号',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.modelsIds"
                  multiple
                  placeholder="请先择物品名称"
                  :disabled="!goodsItem.baseCategoryId"
                  @change="modelChange($event, goodsIndex)"
                  @remove-tag="modelRemoveTag($event, goodsIndex)"
                  style="width: 100%"
                    v-model="goodsItem.modelsIds"
                    multiple
                    clearable
                    :placeholder="goodsItem.baseGoodsTemplateId?'请选择规格型号':'请先选择物品名称'"
                    :disabled="!goodsItem.baseGoodsTemplateId"
                    @change="modelChange($event, goodsIndex)"
                    @remove-tag="modelRemoveTag($event, goodsIndex)"
                    @clear="modelRemoveTag(-1, goodsIndex)"
                    style="width: 100%"
                >
                  <el-option
                    v-for="item in goodsItem.modelsOptions"
                    :key="item.id"
                    :label="item.modelName"
                    :value="item.id"
                      v-for="item in goodsItem.modelsOptions"
                      :key="item.id"
                      :label="item.modelName"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货商" prop="supplier">
                <el-input v-model="goodsItem.supplier" clearable maxlength="20" show-word-limit />
                <el-input v-model="goodsItem.supplier" clearable maxlength="20" show-word-limit/>
              </el-form-item>
            </el-col>
          </el-row>
@@ -134,15 +141,15 @@
            <el-table-column prop="priceYuan" label="单价(元)" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  style="margin-bottom: 0"
                  :prop="`procureGoods[${goodsIndex}].models[${scope.$index}].priceYuan`"
                  :rules="rules.priceYuan"
                    label-width="0"
                    style="margin-bottom: 0"
                    :prop="`procureGoods[${goodsIndex}].models[${scope.$index}].priceYuan`"
                    :rules="rules.priceYuan"
                >
                  <el-input
                    type="number"
                    v-model.number="scope.row.priceYuan"
                    @change="priceChange($event, goodsIndex, scope.$index)"
                      type="number"
                      v-model.number="scope.row.priceYuan"
                      @change="priceChange($event, goodsIndex, scope.$index)"
                  ></el-input>
                </el-form-item>
              </template>
@@ -150,10 +157,10 @@
            <el-table-column prop="counts" label="采购数量" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  style="margin-bottom: 0"
                  :prop="`procureGoods[${goodsIndex}].models[${scope.$index}].counts`"
                  :rules="rules.counts"
                    label-width="0"
                    style="margin-bottom: 0"
                    :prop="`procureGoods[${goodsIndex}].models[${scope.$index}].counts`"
                    :rules="rules.counts"
                >
                  <el-input v-model.number="scope.row.counts"></el-input>
                </el-form-item>
@@ -162,30 +169,32 @@
          </el-table>
          <div class="btn-group">
            <el-button
              v-if="formData.procureGoods.length > 1"
              name="移除"
              type="danger"
              plain
              size="mini"
              @click="removeGoods(goodsIndex)"
              >移除</el-button
                v-if="formData.procureGoods.length > 1"
                name="移除"
                type="danger"
                plain
                size="mini"
                @click="removeGoods(goodsIndex)"
            >移除
            </el-button
            >
            <el-button
              v-if="formData.procureGoods.length - 1 == goodsIndex"
              name="新增物品"
              type="primary"
              plain
              size="mini"
              @click="addGoods"
              >新增物品</el-button
                v-if="formData.procureGoods.length - 1 == goodsIndex"
                name="新增物品"
                type="primary"
                plain
                size="mini"
                @click="addGoods"
            >新增物品
            </el-button
            >
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close" />
      <my-button name="保存" site="form" @click="handleSubmit" />
      <my-button name="取消" site="form" @click="close"/>
      <my-button name="保存" site="form" @click="handleSubmit"/>
    </div>
  </win-md>
</template>
@@ -205,13 +214,15 @@
import {getUploadUrl} from '@/utils/base';
import {findParentIds} from '@/utils/index';
import {mapGetters} from 'vuex';
import * as DateFormatter from "@/utils/DateFormatter";
export default {
  components: { MyButton, winMd, upload },
  components: {MyButton, winMd, upload},
  props: {
    setting: {
      type: Object,
      default: () => {},
      default: () => {
      },
    },
  },
  data() {
@@ -272,7 +283,7 @@
      formData: {
        procureDoc: '',
        warehouseId: '', // 入库仓库id
        procureTime: '', // 采购时间
        procureTime: DateFormatter.formatDate(new Date(), 'yyyyMMddhhmmss'), // 采购时间
        buyType: '2', // 采购方式(1:集采;2=自采)
        procureGoods: [],
      },
@@ -296,16 +307,16 @@
        unit: null, //单位
      },
      rules: {
        warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
        procureTime: [{ required: true, message: '请选择', trigger: 'change' }],
        buyType: [{ required: true, message: '请选择', trigger: 'change' }],
        warehouseId: [{required: true, message: '请选择', trigger: 'change'}],
        procureTime: [{required: true, message: '请选择', trigger: 'change'}],
        buyType: [{required: true, message: '请选择', trigger: 'change'}],
        procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
        baseCategoryIds: [{ required: true, message: '请选择', trigger: 'change' }],
        baseGoodsTemplateId: [{ validator: checkGoodsTemplateId, trigger: ['blur', 'change'] }],
        modelsIds: [{ required: true, message: '请选择', trigger: 'change' }],
        priceYuan: [{ validator: checkPrice, trigger: 'blur' }],
        counts: [{ validator: checkCounts, trigger: 'blur' }],
        procureDoc: [{required: true, message: '请上传', trigger: 'change'}],
        baseCategoryIds: [{required: true, message: '请选择', trigger: 'change'}],
        baseGoodsTemplateId: [{required: true, message: '请选择', trigger: 'change'},{validator: checkGoodsTemplateId, trigger: ['blur', 'change']}],
        modelsIds: [{required: true, message: '请选择', trigger: 'change'}],
        priceYuan: [{validator: checkPrice, trigger: 'blur'}],
        counts: [{validator: checkCounts, trigger: 'blur'}],
      },
      uploadSettings: {
@@ -315,8 +326,6 @@
        tip: '', // 提示 默认:`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件,且不超过${this.defaultSettings.max}kb`
        uploadUrl: getUploadUrl(), // 上传路径
        multiple: true, // 是否支持批量上传
        disabled: false, // 是否禁用
        type: 'picture', // text/picture
      },
    };
  },
@@ -328,31 +337,32 @@
  },
  methods: {
    async init() {
      this.getWarehouseList();
      this.getgoodsTemplate();
      this.getgoodsModel();
      await this.getWarehouseList();
      await this.getgoodsTemplate();
      await this.getgoodsModel();
      // 获取物品分类列表
      const treeRes = await getTree();
      this.categoryOptions = this.removeEmptyChildren(treeRes);
      if (this.setting.id) {
        const detail = await procureDetail({ id: this.setting.id });
        const detail = await procureDetail({id: this.setting.id});
        this.formData = Object.assign(this.formData, detail);
        if (this.formData.procureDoc) {
          this.fileList = JSON.parse(this.formData.procureDoc);
        }
        this.$set(this.formData, 'buyType', this.formData.buyType.toString());
        this.formData.procureTime = this.formData.procureTime.toString();
        this.formData.procureGoods.map((item, index) => {
        this.formData.procureGoods.map(async (item, index) => {
          // 根据子集ID拼接物品分类列表
          item.baseCategoryIds = findParentIds(this.categoryOptions, item.baseCategoryId);
          this.$set(
            this.formData.procureGoods[index],
            'modelsIds',
            item.models.map((v) => v.baseGoodsModelsId),
              this.formData.procureGoods[index],
              'modelsIds',
              item.models.map((v) => v.baseGoodsModelsId),
          );
          this.getgoodsTemplate(item.baseCategoryId, index);
          this.getgoodsModel(item.baseGoodsTemplateId, index);
          item.models.forEach((child, childIndex) => {
          await this.getgoodsTemplate(item.baseCategoryId, index);
          await this.getgoodsModel(item.baseGoodsTemplateId, index);
          await item.models.forEach((child, childIndex) => {
            this.$set(this.formData.procureGoods[index].models[childIndex], 'priceYuan', child.price / 100);
          });
          return item;
@@ -362,21 +372,21 @@
    },
    // 获取入库仓库列表
    getWarehouseList() {
      selectTenantWarehouse({ agencyId: this.userInfo.tenantId })
        .then((res) => {
          this.warehouses = res;
          if (!this.setting.id && res.length) {
            this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
          }
          if (this.warehouses.length && !this.formData.warehouseId) {
            // 默认选中第一个仓库
            this.formData.warehouseId = this.warehouses[0].id;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    async getWarehouseList() {
      await selectTenantWarehouse({agencyId: this.userInfo.tenantId})
          .then((res) => {
            this.warehouses = res;
            if (!this.setting.id && res.length) {
              this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
            }
            if (this.warehouses.length && !this.formData.warehouseId) {
              // 默认选中第一个仓库
              this.formData.warehouseId = this.warehouses[0].id;
            }
          })
          .catch((err) => {
            console.log('err', err);
          });
    },
    removeEmptyChildren(arr) {
@@ -391,8 +401,8 @@
    },
    // 获取物品名称列表
    getgoodsTemplate(id, index) {
      goodsTemplate({ categoryId: id || '' }).then((res) => {
    async getgoodsTemplate(id, index) {
      await goodsTemplate({agencyId: this.userInfo.tenantId, categoryId: id || ''}).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'goodsOptions', res);
        } else {
@@ -402,8 +412,8 @@
    },
    // 规格型号
    getgoodsModel(id, index) {
      goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
    async getgoodsModel(id, index) {
      await goodsModel({goodsTemplatesId: id || ''}).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'modelsOptions', res);
        } else {
@@ -439,9 +449,8 @@
      this.formData.procureGoods[index].modelsIds = [];
      this.formData.procureGoods[index].models = [];
      this.formData.procureGoods[index].baseCategoryId = e[e.length - 1];
      // 根据选中分类请求物品名称列表
      this.getgoodsTemplate(e[e.length - 1], index);
      this.getgoodsTemplate(e, index);
    },
    // 物品名称列表
@@ -462,7 +471,7 @@
      e.forEach((item) => {
        if (str.indexOf(item) == -1) {
          let temp = this.goodsModelAll.find((v) => v.id == item);
          arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit });
          arr.push({...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit});
        }
      });
      this.formData.procureGoods[index].models = arr;
@@ -470,6 +479,10 @@
    // 规格型号移除
    modelRemoveTag(e, index) {
      if(e===-1){
        this.formData.procureGoods[index].models = []
        return
      }
      let arr = this.formData.procureGoods[index].models;
      let delIndex = arr.findIndex((v) => v.baseGoodsModelsId == e);
      this.formData.procureGoods[index].models.splice(delIndex, 1);
@@ -500,29 +513,30 @@
    handleSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.loading) return
          this.loading = true;
          if (!this.setting.id) {
            procureAdd(this.formData)
              .then((res) => {
                this.$message.success('保存成功!');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                this.loading = false;
                this.$message.error('保存失败');
              });
                .then((res) => {
                  this.$message.success('保存成功!');
                  this.close();
                  this.$emit('search');
                })
                .catch((err) => {
                  this.loading = false;
                  this.$message.error('保存失败');
                });
          } else {
            procureEdit(this.formData)
              .then((res) => {
                this.$message.success('保存成功!');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                this.loading = false;
                this.$message.error('保存失败');
              });
                .then((res) => {
                  this.$message.success('保存成功!');
                  this.close();
                  this.$emit('search');
                })
                .catch((err) => {
                  this.loading = false;
                  this.$message.error('保存失败');
                });
          }
        } else {
          this.$message.error('校验未通过,请检查。');