Merge remote-tracking branch 'origin/dev_天津军泰伟业' into dev_天津军泰伟业

gaoluyang

6 天以前 71a9eef518f2f2f1a1eb2fb90f2eb8ab7b155bc8

 src/views/productionManagement/productStructure/StructureEdit.vue

@@ -1,304 +1,285 @@
<template>
  <el-dialog
      v-model="visible"
      title="结构"
      width="1200"
      close-on-click-modal
      @close="visible = false"
  >
    <el-button
        v-if="dataValue.isEdit"
        type="primary"
        @click="addItem"
        style="margin-bottom: 10px"
    >添加
  <el-dialog v-model="visible"
             title="结构"
             width="1200"
             close-on-click-modal
             @close="visible = false">
    <el-button v-if="dataValue.isEdit"
               type="primary"
               @click="addItem"
               style="margin-bottom: 10px">添加
    </el-button>
    <el-button
        v-if="!dataValue.isEdit"
        type="primary"
        @click="dataValue.isEdit = true"
        style="margin-bottom: 10px"
    >编辑
    <el-button v-if="!dataValue.isEdit"
               type="primary"
               @click="dataValue.isEdit = true"
               style="margin-bottom: 10px">编辑
    </el-button>
    <el-button
        v-if="dataValue.isEdit"
        type="primary"
        @click="cancelEdit"
        style="margin-bottom: 10px"
    >取消
    <el-button v-if="dataValue.isEdit"
               type="primary"
               @click="cancelEdit"
               style="margin-bottom: 10px">取消
    </el-button>
    <el-form
        ref="form"
        :model="dataValue"
    >
      <el-table :data="dataValue.dataList" style="width: 100%">
        <el-table-column prop="productName" label="产品" width="150"/>
        <el-table-column prop="model" label="规格" width="150">
    <el-form ref="form"
             :model="dataValue">
      <el-table :data="dataValue.dataList"
                style="width: 100%">
        <el-table-column prop="productName"
                         label="产品"
                         width="150" />
        <el-table-column prop="model"
                         label="规格"
                         width="150">
          <template #default="{ row, $index }">
            <el-form-item
                v-if="dataValue.isEdit"
                :prop="`dataList.${$index}.model`"
                :rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-select
                  v-model="row.model"
                  placeholder="请选择产品"
                  clearable
                  :disabled="!dataValue.isEdit"
                  style="width: 100%"
                  @visible-change="(v) => { if (v) openDialog($index) }"
              >
                <el-option v-if="row.model" :label="row.model" :value="row.model" />
            <el-form-item v-if="dataValue.isEdit"
                          :prop="`dataList.${$index}.model`"
                          :rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]"
                          style="margin: 0">
              <el-select v-model="row.model"
                         placeholder="请选择产品"
                         clearable
                         :disabled="!dataValue.isEdit"
                         style="width: 100%"
                         @visible-change="(v) => { if (v) openDialog($index) }">
                <el-option v-if="row.model"
                           :label="row.model"
                           :value="row.model" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="processId" label="消耗工序" width="150">
        <el-table-column prop="processId"
                         label="消耗工序"
                         width="150">
          <template #default="{ row, $index }">
            <el-form-item
                :prop="`dataList.${$index}.processId`"
                :rules="[{ required: true, message: '请选择消耗工序', trigger: 'change' }]"
                style="margin: 0"
            >
              <el-select
                  v-model="row.processId"
                  placeholder="请选择"
                  filterable
                  clearable
                  style="width: 100%"
                  :disabled="!dataValue.isEdit"
              >
                <el-option
                    v-for="item in dataValue.processOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            <el-form-item :prop="`dataList.${$index}.processId`"
                          :rules="[{ required: true, message: '请选择消耗工序', trigger: 'change' }]"
                          style="margin: 0">
              <el-select v-model="row.processId"
                         placeholder="请选择"
                         filterable
                         clearable
                         style="width: 100%"
                         :disabled="!dataValue.isEdit">
                <el-option v-for="item in dataValue.processOptions"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="unitQuantity" label="单位产出所需数量" width="150">
        <el-table-column prop="unitQuantity"
                         label="单位产出所需数量"
                         width="150">
          <template #default="{ row, $index }">
            <el-form-item
                :prop="`dataList.${$index}.unitQuantity`"
                :rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input-number
                  v-model="row.unitQuantity"
                  :min="0"
                  :precision="2"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                  :disabled="!dataValue.isEdit"
              />
            <el-form-item :prop="`dataList.${$index}.unitQuantity`"
                          :rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur','change'] }]"
                          style="margin: 0">
              <el-input-number v-model="row.unitQuantity"
                               :min="0"
                               :precision="2"
                               :step="1"
                               controls-position="right"
                               style="width: 100%"
                               :disabled="!dataValue.isEdit" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="demandedQuantity" label="需求总量" width="150">
        <el-table-column prop="demandedQuantity"
                         label="需求总量"
                         width="150">
          <template #default="{ row, $index }">
            <el-form-item
                :prop="`dataList.${$index}.demandedQuantity`"
                :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input-number
                  v-model="row.demandedQuantity"
                  :min="0"
                  :precision="2"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                  :disabled="!dataValue.isEdit"
              />
            <el-form-item :prop="`dataList.${$index}.demandedQuantity`"
                          :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur','change'] }]"
                          style="margin: 0">
              <el-input-number v-model="row.demandedQuantity"
                               :min="0"
                               :precision="2"
                               :step="1"
                               controls-position="right"
                               style="width: 100%"
                               :disabled="!dataValue.isEdit" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="unit" label="单位" width="150">
        <el-table-column prop="unit"
                         label="单位"
                         width="150">
          <template #default="{ row, $index }">
            <el-form-item
                :prop="`dataList.${$index}.unit`"
                :rules="[{ required: true, message: '请输入单位', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input
                  v-model="row.unit"
                  placeholder="请输入单位"
                  clearable
                  :disabled="!dataValue.isEdit"
              />
            <el-form-item :prop="`dataList.${$index}.unit`"
                          :rules="[{ required: true, message: '请输入单位', trigger: ['blur','change'] }]"
                          style="margin: 0">
              <el-input v-model="row.unit"
                        placeholder="请输入单位"
                        clearable
                        :disabled="!dataValue.isEdit" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="diskQuantity" label="盘数（盘）" width="150">
        <el-table-column prop="diskQuantity"
                         label="盘数（盘）"
                         width="150">
          <template #default="{ row, $index }">
            <el-form-item
                :prop="`dataList.${$index}.diskQuantity`"
                :rules="[{ required: true, message: '请输入盘数', trigger: ['blur','change'] }]"
                style="margin: 0"
            >
              <el-input-number
                  v-model="row.diskQuantity"
                  :min="0"
                  :precision="0"
                  :step="1"
                  controls-position="right"
                  style="width: 100%"
                  :disabled="!dataValue.isEdit"
              />
            <el-form-item :prop="`dataList.${$index}.diskQuantity`"
                          :rules="[{ required: true, message: '请输入盘数', trigger: ['blur','change'] }]"
                          style="margin: 0">
              <el-input-number v-model="row.diskQuantity"
                               :min="0"
                               :precision="0"
                               :step="1"
                               controls-position="right"
                               style="width: 100%"
                               :disabled="!dataValue.isEdit" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="{ row, $index }">
            <el-button
                type="danger"
                text
                @click="dataValue.dataList.splice($index, 1)"
            >删除
            <el-button type="danger"
                       text
                       @click="dataValue.dataList.splice($index, 1)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <product-select-dialog
        v-if="dataValue.showProductDialog"
        v-model:model-value="dataValue.showProductDialog"
        @confirm="handleProduct"/>
    <product-select-dialog v-if="dataValue.showProductDialog"
                           v-model:model-value="dataValue.showProductDialog"
                           @confirm="handleProduct" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="dataValue.loading" @click="submit" :disabled="!dataValue.isEdit">
        <el-button type="primary"
                   :loading="dataValue.loading"
                   @click="submit"
                   :disabled="!dataValue.isEdit">
          确认
        </el-button>
        <el-button @click="visible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {computed, defineAsyncComponent, defineComponent, onMounted, reactive, ref} from "vue";
import {queryList, add} from '@/api/productionManagement/productStructure.js'
import {list} from '@/api/productionManagement/productionProcess'
import {ElMessage} from "element-plus";
  import {
    computed,
    defineAsyncComponent,
    defineComponent,
    onMounted,
    reactive,
    ref,
  } from "vue";
  import { queryList, add } from "@/api/productionManagement/productStructure.js";
  import { list } from "@/api/productionManagement/productionProcess";
  import { ElMessage } from "element-plus";

  defineComponent({
    name: "StructureEdit",
  });

defineComponent({
  name: "StructureEdit",
})
  const ProductSelectDialog = defineAsyncComponent(
    () => import("@/views/basicData/product/ProductSelectDialog.vue")
  );
  const form = ref();

const ProductSelectDialog = defineAsyncComponent(() => import('@/views/basicData/product/ProductSelectDialog.vue'))
const form = ref()
  const props = defineProps({
    showModel: {
      type: Boolean,
      default: false,
    },
    productModelId: {
      type: Number,
      required: true,
    },
  });

  const emits = defineEmits(["update:showModel"]);
  const visible = computed({
    get() {
      return props.showModel;
    },
    set(val) {
      emits("update:showModel", val);
    },
  });

  const dataValue = reactive({
    dataList: [],
    productOptions: [],
    processOptions: [],
    showProductDialog: false,
    currentRowIndex: null,
    loading: false,
    isEdit: false,
  });

const props = defineProps({
  showModel: {
    type: Boolean,
    default: false
  },
  productModelId: {
    type: Number,
    required: true
  }
})
  const openDialog = index => {
    dataValue.currentRowIndex = index;
    dataValue.showProductDialog = true;
  };

const emits = defineEmits(['update:showModel'])
const visible = computed({
  get() {
    return props.showModel
  },
  set(val) {
    emits('update:showModel', val)
  }
})
  const fetchData = async () => {
    const { data } = await queryList(props.productModelId);
    dataValue.dataList = data;
  };

const dataValue = reactive({
  dataList: [],
  productOptions: [],
  processOptions: [],
  showProductDialog: false,
  currentRowIndex: null,
  loading: false,
  isEdit: false,
});
  const fetchProcessOptions = async () => {
    const { data } = await list(props.productModelId);
    dataValue.processOptions = data;
  };

const openDialog = (index) => {
  dataValue.currentRowIndex = index
  dataValue.showProductDialog = true
}

const fetchData = async () => {
  const {data} = await queryList(props.productModelId)
  dataValue.dataList = data
}

const fetchProcessOptions = async () => {
  const {data} = await list(props.productModelId)
  dataValue.processOptions = data
}

const handleProduct = (row) => {
  if (row?.length > 1) {
    ElMessage.error('只能选择一个产品')
  }
  dataValue.dataList[dataValue.currentRowIndex].productName = row[0].productName
  dataValue.dataList[dataValue.currentRowIndex].model = row[0].model
  dataValue.dataList[dataValue.currentRowIndex].productModelId = row[0].id
  dataValue.showProductDialog = false
}

const submit = () => {
  form.value.validate(valid => {
    dataValue.loading = true
    if (valid) {
      add({
        parentId: props.productModelId,
        productStructureList: dataValue.dataList || []
      }).then(res => {
        ElMessage.success('保存成功')
        visible.value = false
        dataValue.loading = false
      })
  const handleProduct = row => {
    if (row?.length > 1) {
      ElMessage.error("只能选择一个产品");
    }
  }).finally(() => {
    dataValue.loading = false
  })
}
    dataValue.dataList[dataValue.currentRowIndex].productName =
      row[0].productName;
    dataValue.dataList[dataValue.currentRowIndex].model = row[0].model;
    dataValue.dataList[dataValue.currentRowIndex].productModelId = row[0].id;
    dataValue.showProductDialog = false;
  };

const addItem = () => {
  dataValue.dataList.push({
    productName: '',
    productId: '',
    model: undefined,
    productModelId: undefined,
    processId: '',
    unitQuantity: 0,
    demandedQuantity: 0,
    unit: '',
    diskQuantity: 0,
  })
}
  const submit = () => {
    form.value
      .validate(valid => {
        dataValue.loading = true;
        if (valid) {
          add({
            parentId: props.productModelId,
            productStructureList: dataValue.dataList || [],
          }).then(res => {
            ElMessage.success("保存成功");
            visible.value = false;
            dataValue.loading = false;
          });
        }
      })
      .finally(() => {
        dataValue.loading = false;
      });
  };

const cancelEdit = () => {
  dataValue.isEdit = false
  dataValue.dataList = dataValue.dataList.filter(item => item.id !== undefined)
}
  const addItem = () => {
    dataValue.dataList.push({
      productName: "",
      productId: "",
      model: undefined,
      productModelId: undefined,
      processId: "",
      unitQuantity: 0,
      demandedQuantity: 0,
      unit: "",
      diskQuantity: 0,
    });
  };

onMounted(() => {
  fetchData()
  fetchProcessOptions()
})
  const cancelEdit = () => {
    dataValue.isEdit = false;
    dataValue.dataList = dataValue.dataList.filter(item => item.id !== undefined);
  };


  onMounted(() => {
    fetchData();
    fetchProcessOptions();
  });
</script>