ezhizao_dms_vue/src/views/business/outsource/DialogProcesses.vue

<template>
  <el-dialog
    title="添加工序"
    v-model="visible"
    width="800px"
    height="400px"
    @close="close"
    append-to-body
    draggable
  >
    <el-form
      ref="dialogForm"
      :model="queryParams"
      :inline="true"
      style="padding-top: 16px"
    >
      <el-form-item label="工序名称：" prop="processAlias" label-width="104">
        <el-input
          v-model.trim="queryParams.keyword"
          type="text"
          @keydown.enter.prevent
          style="width: 160px"
          placeholder="请输入关键字"
          :clearable="true"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button type="info" icon="Search" @click="handleSearch"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="dialogTable"
      :data="productList"
      size="small"
      v-loading="loading"
      border
      height="370px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" align="center" />
      <el-table-column label="序号" width="56" align="center" type="index" />
      <el-table-column label="工序名称" align="center" prop="processAlias" />
    </el-table>
    <!-- 分页 -->
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    /> -->
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Check"
          :disabled="selections.length === 0"
          @click="handleMultipleSelected"
        >
          确 定
        </el-button>
        <el-button type="danger" icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
/**
 * 需要多选，确定后带回至发货明细中，并且会组合成一个英文逗号分割的字符串
 * 逻辑
 * 0、数据来源：根据当前明细对应的daywork_id，找到这个daywork尚未完成的工序。
 * 		思路：
 * 		1）先找到这个daywork对应的daywork_item，查找status >= 4，并且是外协的那一条记录
 * 		2）这条记录中，记录了process_id，这个工序就是外协之前完成的工序，需要到当前daywork对应的标准工艺中查询所有工序
 *    3）将未完成的工序找出来，可以根据process_id对应的工序的【工序序号】，比这个序号大的，就是未完成的工序。
 * 		4）这里要注意的是：废品回用、单批单改的工艺，不是标准工艺，要从另外一个表中获得。需要将工序查询分在2个私有方法中实现。避免混淆。
 *
 * 1、发货明细每条都对应一个从表，记录该外协产品需要外协的工序，这个从表是不在前端展示的，但要保存到数据库中
 * 2、选择的工序，在对应的发货明细中，以英文逗号分割的形式存储在当前明细的processNames字段中，
 *    在form页面中的ref=【dialogProcessesRef】的对话框:multiple-selected="handleMultipleSelectedProcesses"
 *    中查看
 * 3、后端 BizOutsourcedOrderController，要保存的数据：
 * 	 【biz_outsourced_order】
 *   【biz_outsourced_order_detail】
 *   【biz_outsourced_order_detail_process】
 * 4、外协单做完后，需要做外协报工，这个部分的功能是给外协商使用，是一个新的前端工程，需要用到的数据：
 * 	 【biz_outsourced_order】
 *   【biz_outsourced_order_detail】
 *   【biz_outsourced_order_detail_process】
 * 		外协商要看到，是什么产品，什么工序，多少数量
 */
import { processesForOutsource } from "@/api/business/daywork";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { process_status } = proxy.useDict("process_status");
/** 工序变量 */
const total = ref(0);
const props = defineProps({
  multipleSelected: {
    type: Function,
    default: null,
  },
  supplierId: {
    type: String,
    default: "",
  },
});

const { multipleSelected, supplierId } = toRefs(props);
const productList = ref([]);
const visible = ref(false);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const selections = ref([]);

/**
 * 对话框打开 事件
 */
function open(data) {
  console.log(data)
  queryParams.value.lotId = data.lotId
  queryParams.value.outsourceDetailId = data.id?data.id:0
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  visible.value = true;
  getList();
}

/**
 * 对话框关闭 事件
 */
function close() {
  proxy.$refs.dialogForm.resetFields();
  proxy.$refs.dialogTable.clearSelection();
  queryParams.value.pageNum = 1;
  visible.value = false;
}

/**
 * 加载数据
 */
function getList() {
  loading.value = true;
  processesForOutsource(queryParams.value).then((res) => {
    productList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
}

/**  搜索 事件 */
function handleSearch() {
  getList();
}
/** 多选事件 */
function handleMultipleSelected() {
  if (multipleSelected.value) {
    multipleSelected.value(selections.value);
  }
  close();
}

defineExpose({
  open,
});
</script>