ezhizao_dms_vue/src/views/business/reviseBath/onceSingleChangeDialog.vue

<template>
  <el-dialog
    title="单批单改"
    v-model="visible"
    width="680px"
    append-to-body
    draggable
    @close="cancel"
  >
    <el-form class="list-search-container" :inline="true">
      <el-form-item>
        <el-button
          type="primary"
          icon="Plus"
          :disabled="click"
          @click="handleAdd"
          >在此工序前添加新工序</el-button
        >
        <el-button type="danger" @click="handleDel" icon="delete"
          >删除</el-button
        >
      </el-form-item>
    </el-form>
    <div class="el-table-inner-container">
      <el-table
        ref="processTable"
        style="height: 500px"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        :data="processList"
      >
        <el-table-column
          type="selection"
          :selectable="checkSelectable"
          width="50"
          align="center"
        />
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column label="工序名称" prop="processAlias" align="center" />

        <el-table-column
          label="工序编号"
          prop="processStepNumber"
          width="200"
          align="center"
        />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    title="选择工序"
    v-model="addProcess"
    width="800px"
    append-to-body
    draggable
    @close="processClose"
  >
    <div class="page-container column-container">
      <el-form style="padding: 16px" :inline="true">
        <el-form-item label="工序名称：">
          <el-input
            placeholder="请输入工序名称或简称"
            @keydown.enter.prevent
            @keyup.enter="handleQuery"
            clearable
            v-model="queryParams.keyword"
            style="width: 200px"
          />
          <el-button
            style="margin-left: 20px"
            type="primary"
            @click="handleSelect"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="el-table-inner-container">
        <el-table height="95%" :data="addProcessList">
          <el-table-column
            label="工序编号"
            prop="processCode"
            align="center"
          ></el-table-column>

          <el-table-column
            label="工序名称"
            prop="processAlias"
            align="center"
          ></el-table-column>

          <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button
                link
                size="small"
                type="primary"
                icon="check"
                @click="handleProcess(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleSelect"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import { getDayworkItemProcess } from "@/api/business/daywork.js";
import { getProcessList, addAmend } from "@/api/business/technologicalAmend.js";
import { ref } from "vue";

/** 变量 */
const visible = ref(false);
const loading = ref(false);
const haveModified = ref(false); //是否已经修改
const addProcess = ref(false); //新增工序弹窗
const processTable = ref(null);
const total = ref(0);
const emit = defineEmits(["handleSaveSuccess"]);
const ids = ref([]); //多选框选中数据
const click = ref(true); //按钮不可点
const addProcessList = ref([]); //新增选择工序列表
const processList = ref([]); //工序列表
const lot = ref({}); //批次信息
const dayworkItem = ref({}); //报工信息

const { proxy } = getCurrentInstance();

/** 查询对象 */
const queryParams = ref({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});

/***********************  方法区  ****************************/
/** 打开弹窗 */
function open(id) {
  visible.value = true;
  loading.value = true;
  getDayworkItemProcess(id).then((res) => {
    lot.value = res.data.lot;
    dayworkItem.value = res.data.dayworkItem;
    processList.value = res.data.processDetails;
    loading.value = false;
  });
}

/** 新增工序弹窗搜索按钮操作 */
function handleSelect() {
  getProcessList(queryParams.value).then((res) => {
    addProcessList.value = res.rows;
    total.value = res.total;
  });
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  click.value = ids.value.length == 1 ? false : true;
}

/** 删除按钮操作 */
function handleDel() {
  //查询选中数据
  const delRows = processTable.value.getSelectionRows();

  proxy.$modal.confirm("是否确认删除该条数据？").then(() => {
    processList.value = processList.value.filter(
      (item) => !delRows.includes(item)
    );
  });
}

/** 新增工序确认按钮 操作*/
function handleProcess(row) {
  //查询选中工序位置
  const clickProcess = processTable.value.getSelectionRows();
  let indexNum = processList.value.findIndex((item) =>
    Object.is(item, clickProcess[0])
  );
  console.log("indexNum", indexNum);

  //获取新增工序上一条排序
  let num = processList.value[indexNum - 1].processStepNumber; //

  //复制选中数据
  let process = { ...processList.value[indexNum] };

  //修改新增数据
  process.processAlias = row.processAlias;
  process.processCode = row.processCode;
  process.processId = row.id;

  //插入数据
  processList.value.splice(indexNum, 0, process);

  //修改排序数据
  processList.value.forEach((item, index) => {
    if (index >= indexNum) {
      num = Number(num) + 1;
      item.processStepNumber = Number(num);
    }
  });
  haveModified.value = true;
  processClose();
}

/** 是否可选 */
function checkSelectable(row) {
  if (dayworkItem.value) {
    return dayworkItem.value.status != 0
      ? row.processStepNumber > dayworkItem.value.processStepNumber
      : row.processStepNumber >= dayworkItem.value.processStepNumber;
  } else {
    return true;
  }
}

/** 添加新工序按钮操作 */
function handleAdd() {
  // if (haveModified.value) {
  //   proxy.$modal.msgError("只能修改一次工序数据");
  //   return;
  // }
  handleSelect();
  addProcess.value = true;
}

/** 关闭新增工序弹窗 */
function processClose() {
  addProcess.value = false;
}

/** 关闭弹窗 */
function cancel() {
  visible.value = false;
  addProcess.value = false;
  haveModified.value = false;
}
/** 确定按钮 */
function submitForm() {
  if (!haveModified.value) {
    proxy.$modal.msgError("未进行修改，清修改后再进行确认");
    return;
  } else {
    loading.value = true;
    addAmend(lot.value.id, processList.value).then((res) => {
      if (res.code == 200) {
        loading.value = true;
        proxy.$modal.msgSuccess("修改成功");
        emit("handleSaveSuccess", lot.value.lotCode);
        cancel();
      } else {
        loading.value = true;
        proxy.$modal.msgError(res.msg);
      }
    });
  }
}
/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>