From 86462dc79cf879f9a6fd85c434076c7ebf882f7c Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 08 七月 2025 17:25:48 +0800
Subject: [PATCH] 协同审批页面开发

---
 src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue |  106 +++++++++
 src/views/collaborativeApproval/approvalProcess/index.vue                  |  238 +++++++++++++++++++++
 src/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue |  261 +++++++++++++++++++++++
 3 files changed, 605 insertions(+), 0 deletions(-)

diff --git a/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
new file mode 100644
index 0000000..57b5e38
--- /dev/null
+++ b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <el-dialog
+        v-model="dialogFormVisible"
+        :title="operationType === 'add' ? '鏂板瀹℃壒娴佺▼' : '缂栬緫瀹℃壒娴佺▼'"
+        width="700px"
+        @close="closeDia"
+    >
+      <el-form :model="{ activities }" ref="formRef" label-position="top">
+        <el-timeline style="max-width: 600px">
+          <el-timeline-item
+              v-for="(activity, index) in activities"
+              :key="index"
+              :type="activity.current ? 'primary' : ''"
+              :hollow="activity.current"
+              :timestamp="activity.timestamp"
+          >
+            <el-card>
+              <span style="font-size: 18px;font-weight: 700">{{activity.content}}</span>
+              <div style="margin: 10px 0">
+                <span style="font-size: 16px;font-weight: 600">瀹℃壒浜猴細{{activity.people}}</span>
+              </div>
+              <div>
+                <span style="margin-bottom: 8px;display: inline-block;font-size: 16px;font-weight: 600">瀹℃壒鎰忚锛�</span>
+                <el-form-item
+                  v-if="activity.current"
+                  :prop="'activities.' + index + '.value'"
+                  :rules="[{ required: true, message: '瀹℃壒鎰忚涓嶈兘涓虹┖', trigger: 'blur' }]"
+                >
+                  <el-input v-model="activity.value" clearable type="textarea" :disabled="operationType === 'view'"></el-input>
+                </el-form-item>
+                <el-form-item v-else>
+                  <el-input v-model="activity.value" clearable type="textarea" disabled></el-input>
+                </el-form-item>
+              </div>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </el-form>
+      <template #footer v-if="operationType === 'approval'">
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">纭</el-button>
+          <el-button @click="closeDia">鍙栨秷</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {getCurrentInstance, ref} from "vue";
+const emit = defineEmits(['close'])
+const { proxy } = getCurrentInstance()
+
+const dialogFormVisible = ref(false);
+const operationType = ref('')
+const activities = ref([
+  {
+    content: '鑺傜偣1',
+    timestamp: '',
+    type: 'primary',
+    hollow: true,
+    people: 'admin',
+    value: ''
+  },
+  {
+    content: '鑺傜偣2',
+    timestamp: '',
+    type: '',
+    hollow: false,
+    current: true,
+    people: 'admin',
+    value: ''
+  },
+])
+const formRef = ref(null);
+
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+  operationType.value = type;
+  dialogFormVisible.value = true;
+}
+// 鎻愪氦瀹℃壒
+const submitForm = () => {
+  formRef.value.validate(valid => {
+    if (valid) {
+      // 鏍￠獙閫氳繃鍚庣殑閫昏緫
+    }
+  })
+}
+// 鍏抽棴寮规
+const closeDia = () => {
+  proxy.resetForm("formRef");
+  dialogFormVisible.value = false;
+  emit('close')
+};
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+.el-timeline {
+  padding-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue b/src/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue
new file mode 100644
index 0000000..94155b6
--- /dev/null
+++ b/src/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue
@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <el-dialog
+        v-model="dialogFormVisible"
+        :title="operationType === 'add' ? '鏂板瀹℃壒娴佺▼' : '缂栬緫瀹℃壒娴佺▼'"
+        width="50%"
+        @close="closeDia"
+    >
+      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="娴佺▼缂栧彿锛�" prop="supplier">
+              <el-input v-model="form.model" placeholder="鑷姩缂栧彿" clearable disabled/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="鐢宠閮ㄩ棬锛�" prop="productId">
+              <el-tree-select
+                  v-model="form.productId"
+                  placeholder="璇烽�夋嫨"
+                  clearable
+                  check-strictly
+                  @change="getModels"
+                  :data="productOptions"
+                  :render-after-expand="false"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="瀹℃壒浜嬬敱锛�" prop="model">
+              <el-input v-model="form.model" placeholder="璇疯緭鍏�" clearable type="textarea" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 瀹℃壒浜洪�夋嫨锛堝姩鎬佽妭鐐癸級 -->
+        <el-row>
+          <el-col :span="24">
+            <el-form-item>
+              <template #label>
+                <span>瀹℃壒浜洪�夋嫨锛�</span>
+                <el-button type="primary" @click="addApproverNode" style="margin-left: 8px;">鏂板鑺傜偣</el-button>
+              </template>
+              <div style="display: flex; align-items: flex-end; flex-wrap: wrap;">
+                <div
+                  v-for="(node, index) in approverNodes"
+                  :key="node.id"
+                  style="margin-right: 30px; text-align: center; margin-bottom: 10px;"
+                >
+                  <div>鑺傜偣{{ index + 1 }} 鈫�</div>
+                  <el-select
+                    v-model="node.userId"
+                    placeholder="閫夋嫨浜哄憳"
+                    style="width: 120px; margin-bottom: 8px;"
+                  >
+                    <el-option
+                      v-for="user in userList"
+                      :key="user.id"
+                      :label="user.name"
+                      :value="user.id"
+                    />
+                  </el-select>
+                  <div>
+                    <el-button
+                      type="danger"
+                      size="small"
+                      @click="removeApproverNode(index)"
+                      v-if="approverNodes.length > 1"
+                    >鍒犻櫎</el-button>
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鐢宠浜猴細" prop="checkName">
+              <el-input v-model="form.checkName" placeholder="璇疯緭鍏�" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鐢宠鏃ユ湡锛�" prop="checkTime">
+              <el-date-picker
+                  v-model="form.checkTime"
+                  type="date"
+                  placeholder="璇烽�夋嫨鏃ユ湡"
+                  value-format="YYYY-MM-DD"
+                  format="YYYY-MM-DD"
+                  clearable
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">纭</el-button>
+          <el-button @click="closeDia">鍙栨秷</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, toRefs, getCurrentInstance} from "vue";
+import {getOptions} from "@/api/procurementManagement/procurementLedger.js";
+import {productTreeList} from "@/api/basicData/product.js";
+import {qualityInspectAdd, qualityInspectUpdate} from "@/api/qualityManagement/rawMaterialInspection.js";
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['close'])
+
+const dialogFormVisible = ref(false);
+const operationType = ref('')
+const data = reactive({
+  form: {
+    checkTime: "",
+    supplier: "",
+    checkName: "",
+    productName: "",
+    productId: "",
+    model: "",
+    unit: "",
+    quantity: "",
+    checkCompany: "",
+    checkResult: "",
+    approverList: [] // 鏂板瀛楁锛屽瓨鍌ㄦ墍鏈夎妭鐐圭殑瀹℃壒浜篿d
+  },
+  rules: {
+    checkTime: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" },],
+    supplier: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    checkName: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
+    productId: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    model: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
+    unit: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
+    quantity: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    checkCompany: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
+    checkResult: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
+  },
+});
+const { form, rules } = toRefs(data);
+const supplierList = ref([]);
+const productOptions = ref([]);
+
+// 瀹℃壒浜鸿妭鐐圭浉鍏�
+const approverNodes = ref([
+  { id: 1, userId: null }
+])
+let nextApproverId = 2
+const userList = ref([
+  { id: 1, name: '寮犱笁' },
+  { id: 2, name: '鏉庡洓' },
+  { id: 3, name: '鐜嬩簲' }
+])
+function addApproverNode() {
+  approverNodes.value.push({ id: nextApproverId++, userId: null })
+}
+function removeApproverNode(index) {
+  approverNodes.value.splice(index, 1)
+}
+
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+  operationType.value = type;
+  dialogFormVisible.value = true;
+  getOptions().then((res) => {
+    supplierList.value = res.data;
+  });
+  getProductOptions();
+  if (operationType.value === 'edit') {
+    form.value = {...row}
+    // 鍥炴樉瀹℃壒浜鸿妭鐐�
+    if (row.approverList && Array.isArray(row.approverList) && row.approverList.length > 0) {
+      approverNodes.value = row.approverList.map((userId, idx) => ({ id: idx + 1, userId }))
+      nextApproverId = row.approverList.length + 1
+    } else {
+      approverNodes.value = [{ id: 1, userId: null }]
+      nextApproverId = 2
+    }
+  } else {
+    approverNodes.value = [{ id: 1, userId: null }]
+    nextApproverId = 2
+  }
+}
+const getProductOptions = () => {
+  productTreeList().then((res) => {
+    productOptions.value = convertIdToValue(res);
+  });
+};
+const getModels = (value) => {
+  form.value.productName = findNodeById(productOptions.value, value);
+};
+const findNodeById = (nodes, productId) => {
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].value === productId) {
+      return nodes[i].label; // 鎵惧埌鑺傜偣锛岃繑鍥炶鑺傜偣
+    }
+    if (nodes[i].children && nodes[i].children.length > 0) {
+      const foundNode = findNodeById(nodes[i].children, productId);
+      if (foundNode) {
+        return foundNode; // 鍦ㄥ瓙鑺傜偣涓壘鍒帮紝杩斿洖璇ヨ妭鐐�
+      }
+    }
+  }
+  return null; // 娌℃湁鎵惧埌鑺傜偣锛岃繑鍥瀗ull
+};
+function convertIdToValue(data) {
+  return data.map((item) => {
+    const { id, children, ...rest } = item;
+    const newItem = {
+      ...rest,
+      value: id, // 灏� id 鏀逛负 value
+    };
+    if (children && children.length > 0) {
+      newItem.children = convertIdToValue(children);
+    }
+    
+    return newItem;
+  });
+}
+// 鎻愪氦浜у搧琛ㄥ崟
+const submitForm = () => {
+  // 鏀堕泦鎵�鏈夎妭鐐圭殑瀹℃壒浜篿d
+  form.value.approverList = approverNodes.value.map(node => node.userId)
+  proxy.$refs.formRef.validate(valid => {
+    if (valid) {
+      form.value.inspectType = 0
+      if (operationType.value === "add") {
+        qualityInspectAdd(form.value).then(res => {
+          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+          closeDia();
+        })
+      } else {
+        qualityInspectUpdate(form.value).then(res => {
+          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+          closeDia();
+        })
+      }
+    }
+  })
+}
+// 鍏抽棴寮规
+const closeDia = () => {
+  proxy.resetForm("formRef");
+  dialogFormVisible.value = false;
+  emit('close')
+};
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/collaborativeApproval/approvalProcess/index.vue b/src/views/collaborativeApproval/approvalProcess/index.vue
new file mode 100644
index 0000000..4958ecb
--- /dev/null
+++ b/src/views/collaborativeApproval/approvalProcess/index.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="app-container">
+    <div class="search_form">
+      <div>
+        <span class="search_title">渚涘簲鍟嗭細</span>
+        <el-input
+            v-model="searchForm.supplier"
+            style="width: 240px"
+            placeholder="璇疯緭鍏ヤ緵搴斿晢鎼滅储"
+            @change="handleQuery"
+            clearable
+            :prefix-icon="Search"
+        />
+        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+        >鎼滅储</el-button
+        >
+      </div>
+      <div>
+        <el-button type="primary" @click="openForm('add')">鏂板</el-button>
+<!--        <el-button @click="handleOut">瀵煎嚭</el-button>-->
+        <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
+      </div>
+    </div>
+    <div class="table_list">
+      <PIMTable
+          rowKey="id"
+          :column="tableColumn"
+          :tableData="tableData"
+          :page="page"
+          :isSelection="true"
+          @selection-change="handleSelectionChange"
+          :tableLoading="tableLoading"
+          @pagination="pagination"
+          :total="page.total"
+      ></PIMTable>
+    </div>
+    <info-form-dia ref="infoFormDia" @close="handleQuery"></info-form-dia>
+    <approval-dia ref="approvalDia" @close="handleQuery"></approval-dia>
+  </div>
+</template>
+
+<script setup>
+import { Search } from "@element-plus/icons-vue";
+import {onMounted, ref} from "vue";
+import {ElMessageBox} from "element-plus";
+import {qualityInspectDel, qualityInspectListPage} from "@/api/qualityManagement/rawMaterialInspection.js";
+import InfoFormDia from "@/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue";
+import ApprovalDia from "@/views/collaborativeApproval/approvalProcess/components/approvalDia.vue";
+
+const data = reactive({
+  searchForm: {
+    supplier: "",
+  },
+});
+const { searchForm } = toRefs(data);
+const tableColumn = ref([
+  {
+    label: "瀹℃壒鐘舵��",
+    prop: "checkResult",
+    dataType: "tag",
+    formatData: (params) => {
+      if (params == 0) {
+        return "寰呭鏍�";
+      } else if (params == 1) {
+        return "宸插畬鎴�";
+      } else if (params == 2) {
+        return "涓嶉�氳繃";
+      } else {
+        return '瀹℃牳涓�';
+      }
+    },
+    formatType: (params) => {
+      if (params == '涓嶅悎鏍�') {
+        return "danger";
+      } else if (params == '鍚堟牸') {
+        return "success";
+      } else {
+        return null;
+      }
+    },
+  },
+  {
+    label: "娴佺▼缂栧彿",
+    prop: "supplier",
+    width: 230
+  },
+  {
+    label: "鐢宠閮ㄩ棬",
+    prop: "checkName",
+  },
+  {
+    label: "瀹℃壒浜嬬敱",
+    prop: "productName",
+  },
+  {
+    label: "鐢宠浜�",
+    prop: "model",
+  },
+  {
+    label: "鐢宠鏃ユ湡",
+    prop: "unit",
+  },
+  {
+    label: "缁撴潫鏃ユ湡",
+    prop: "quantity",
+    width: 120
+  },
+  {
+    label: "褰撳墠瀹℃壒浜�",
+    prop: "checkCompany",
+    width: 120
+  },
+  {
+    dataType: "action",
+    label: "鎿嶄綔",
+    align: "center",
+    fixed: "right",
+    width: 150,
+    operation: [
+      {
+        name: "缂栬緫",
+        type: "text",
+        clickFun: (row) => {
+          openForm("edit", row);
+        },
+      },
+      {
+        name: "瀹℃牳",
+        type: "text",
+        clickFun: (row) => {
+          openApprovalDia("approval", row);
+        },
+      },
+      {
+        name: "璇︽儏",
+        type: "text",
+        clickFun: (row) => {
+          openApprovalDia('view', row);
+        },
+      },
+    ],
+  },
+]);
+const tableData = ref([]);
+const selectedRows = ref([]);
+const tableLoading = ref(false);
+const page = reactive({
+  current: 1,
+  size: 100,
+  total: 0
+});
+const infoFormDia = ref()
+const approvalDia = ref()
+const { proxy } = getCurrentInstance()
+
+// 鏌ヨ鍒楄〃
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+  page.current = 1;
+  getList();
+};
+const pagination = (obj) => {
+  page.current = obj.page;
+  page.size = obj.limit;
+  getList();
+};
+const getList = () => {
+  tableLoading.value = true;
+  qualityInspectListPage({...page, ...searchForm.value, inspectType: 0}).then(res => {
+    tableLoading.value = false;
+    tableData.value = res.data.records
+    page.total = res.data.total;
+  }).catch(err => {
+    tableLoading.value = false;
+  })
+};
+// 琛ㄦ牸閫夋嫨鏁版嵁
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection;
+};
+
+// 鎵撳紑鏂板銆佺紪杈戝脊妗�
+const openForm = (type, row) => {
+  nextTick(() => {
+    infoFormDia.value?.openDialog(type, row)
+  })
+};
+// 鎵撳紑鏂板妫�楠屽脊妗�
+const openApprovalDia = (type, row) => {
+  nextTick(() => {
+    approvalDia.value?.openDialog(type, row)
+  })
+};
+
+// 鍒犻櫎
+const handleDelete = () => {
+  let ids = [];
+  if (selectedRows.value.length > 0) {
+    ids = selectedRows.value.map((item) => item.id);
+  } else {
+    proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+    return;
+  }
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "瀵煎嚭", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+      .then(() => {
+        qualityInspectDel(ids).then((res) => {
+          proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+          getList();
+        });
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
+};
+// 瀵煎嚭
+const handleOut = () => {
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+      .then(() => {
+        proxy.download("/quality/qualityInspect/export", {inspectType: 0}, "鍘熸潗鏂欐楠�.xlsx");
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped></style>

--
Gitblit v1.9.3