From 193af68d72a71268054f7d07395c2ea11210ecc1 Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期五, 30 五月 2025 09:40:28 +0800
Subject: [PATCH] 提交基础信息 三个模块 提交采购管理
---
src/hooks/useFormData.js | 18
src/views/basicInformation/index.vue | 528 ++++++++++++
src/views/procureMent/index.vue | 308 +++++++
src/views/procureMent/components/ProductionDialog.vue | 253 ++++++
src/views/basicInformation/mould/coal.vue | 155 +++
src/hooks/usePaginationApi.jsx | 145 +++
src/views/basicInformation/mould/supplier.vue | 154 +++
src/components/Table/ETable.vue | 182 ++++
src/views/basicInformation/indexs.vue | 541 +++++++++++++
src/views/basicInformation/mould/customer.vue | 140 +++
10 files changed, 2,424 insertions(+), 0 deletions(-)
diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
new file mode 100644
index 0000000..91f767a
--- /dev/null
+++ b/src/components/Table/ETable.vue
@@ -0,0 +1,182 @@
+<template>
+ <el-table
+ v-loading="loading"
+ :data="tableData"
+ style="width: 100%"
+ :border="border"
+ :show-selection="showSelection"
+ :max-height="maxHeight"
+ @selection-change="handleSelectionChange"
+ @row-click="handleRowClick"
+ @row-dblclick="handleRowDblClick"
+ @cell-click="handleCellClick"
+ :max-width="maxWidth"
+ @export="handleExport"
+ >
+ <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
+ <el-table-column v-if="showIndex" label="搴忓彿" type="index" width="60" align="center" />
+ <template v-for="col in columns" :key="col.prop">
+ <el-table-column
+ v-bind="col"
+ :show-overflow-tooltip="col.showOverflowTooltip !== false"
+ >
+ <template v-if="col.slot" #default>
+ <slot></slot>
+ </template>
+ </el-table-column>
+ </template>
+ <!-- 鎿嶄綔鍒� -->
+ <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right">
+ <template #default="scope">
+ <slot name="operations" :row="scope.row">
+ <el-button
+ v-if="operations.includes('edit')"
+ link
+ type="primary"
+ size="small"
+ @click="handleEdit(scope.row)"
+ >缂栬緫</el-button>
+ <el-button
+ v-if="operations.includes('delete')"
+ link
+ type="danger"
+ size="small"
+ @click="handleDelete(scope.row)"
+ >鍒犻櫎</el-button>
+ </slot>
+ </template>
+ </el-table-column>
+ </el-table>
+ </template>
+
+ <script setup>
+ import { defineEmits } from 'vue'
+ import { ElMessage, ElMessageBox } from 'element-plus'
+
+ const props = defineProps({
+ // 鏈�澶у搴�
+ maxWidth: {
+ type: [String, Number],
+ default: 'auto'
+ },
+ handleCellClick: {
+ type: Function,
+ default: () => {}
+ },
+ handleRowClick: {
+ type: Function,
+ default: () => {}
+ },
+ handleExport: {
+ type: Function,
+ default: () => {}
+ },
+ handleRowDblClick: {
+ type: Function,
+ default: () => {}
+ },
+ // 楂樺害
+ maxHeight: {
+ type: [String, Number],
+ default: 'auto'
+ },
+ // 鍔犺浇鐘舵��
+ loading: {
+ type: Boolean,
+ default: false
+ },
+ // border
+ border: {
+ type: Boolean,
+ default: false
+ },
+ // 琛ㄦ牸鏁版嵁
+ tableData: {
+ type: Array,
+ default: () => []
+ },
+ // 鏄惁鏄剧ず閫夋嫨鍒�
+ showSelection: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鏄剧ず搴忓彿鍒�
+ showIndex: {
+ type: Boolean,
+ default: true
+ },
+ // 鍒楅厤缃�
+ columns: {
+ type: Array,
+ default: () => []
+ },
+ // 鏄惁鏄剧ず鎿嶄綔鍒�
+ showOperations: {
+ type: Boolean,
+ default: true
+ },
+ // 鎿嶄綔鍒楁爣绛�
+ operationsLabel: {
+ type: String,
+ default: '鎿嶄綔'
+ },
+ // 鎿嶄綔鍒楀搴�
+ operationsWidth: {
+ type: [String, Number],
+ default: 160
+ },
+ // 鏄剧ず鍝簺鎿嶄綔鎸夐挳
+ operations: {
+ type: Array,
+ default: () => ['edit', 'delete', 'export']
+ },
+ // 鍒犻櫎纭淇℃伅
+ deleteConfirmText: {
+ type: String,
+ default: '纭鍒犻櫎璇ヨ褰曪紵'
+ }
+ })
+ const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
+ const handleSelectionChange = (selection) => {
+ emit('selection-change', selection)
+ }
+ const handleEdit = (row) => {
+ emit('edit', row)
+ }
+ const handleDelete = (row) => {
+ ElMessageBox.confirm(
+ props.deleteConfirmText,
+ '璀﹀憡',
+ {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }
+ ).then(() => {
+ emit('delete', row)
+ }).catch(() => {})
+ }
+
+ const handleExport = (row) => {
+ emit('export', row)
+ }
+ </script>
+
+ <style scoped>
+ :deep(.el-table) {
+ margin-bottom: 20px;
+ overflow-x: auto;
+ }
+
+ :deep(.el-table th) {
+ background-color: #f5f7fa;
+ }
+
+ /* 鍝嶅簲寮忔牱寮� */
+ @media screen and (max-width: 768px) {
+ :deep(.el-table) {
+ width: 100%;
+ overflow-x: auto;
+ }
+ }
+ </style>
\ No newline at end of file
diff --git a/src/hooks/useFormData.js b/src/hooks/useFormData.js
new file mode 100644
index 0000000..7363aa8
--- /dev/null
+++ b/src/hooks/useFormData.js
@@ -0,0 +1,18 @@
+import { reactive } from "vue";
+import { clone } from "lodash";
+
+
+export default function useFormData(initData) {
+ const form = reactive(clone(initData, true));
+
+ function resetForm() {
+ const initData2 = JSON.parse(JSON.stringify(initData));
+ Object.keys(initData).forEach(key => {
+ form[key] = initData2[key];
+ });
+ }
+
+ return { form, resetForm };
+}
+
+
diff --git a/src/hooks/usePaginationApi.jsx b/src/hooks/usePaginationApi.jsx
new file mode 100644
index 0000000..aa995b0
--- /dev/null
+++ b/src/hooks/usePaginationApi.jsx
@@ -0,0 +1,145 @@
+import { ref, reactive, watchEffect, unref } from "vue";
+import useFormData from "./useFormData.js";
+// import { message } from "@/utils/message";
+
+import { clone, isEqual } from "lodash";
+/**
+ * 鍒嗛〉api
+ * @param api 鎺ュ彛
+ * @param initalFilters 鍒濆鍖栫瓫閫夋潯浠�
+ * @param sorters
+ * @param filterTransformer
+ */
+export function usePaginationApi(
+ api,
+ initalFilters,
+ columns,
+ sorters,
+ filterTransformer,
+ cb
+) {
+ const dataList = ref([]);
+ const { form: filters, resetForm } = useFormData(initalFilters);
+ let lastFilters = clone(initalFilters);
+ const sorter = reactive(sorters || {});
+ const others = ref({});
+ const loading = ref(true);
+ const paginationAlign = ref("right");
+
+ /** 鍒嗛〉閰嶇疆 */
+ const pagination = reactive({
+ pageSize: 10,
+ currentPage: 1,
+ pageSizes: [10, 15, 20],
+ total: 0,
+ align: "right",
+ background: true
+ });
+
+ /** 鍔犺浇鍔ㄧ敾閰嶇疆 */
+ const loadingConfig = reactive({
+ text: "姝ｅ湪鍔犺浇绗竴椤�...",
+ viewBox: "-10, -10, 50, 50",
+ spinner: `
+ <path class="path" d="
+ M 30 15
+ L 28 17
+ M 25.61 25.61
+ A 15 15, 0, 0, 1, 15 30
+ A 15 15, 0, 1, 1, 27.99 7.5
+ L 15 15
+ " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+ `
+ // svg: "",
+ // background: rgba()
+ });
+
+ function getFinalParams() {
+ const finalFilters = {};
+ const beforeParams = unref(filters);
+ if (filterTransformer) {
+ Object.keys(beforeParams).forEach(key => {
+ if (filterTransformer[key]) {
+ Object.assign(
+ finalFilters,
+ filterTransformer[key](beforeParams[key], beforeParams)
+ );
+ } else {
+ finalFilters[key] = beforeParams[key];
+ }
+ });
+ }
+
+ return filterTransformer
+ ? { ...finalFilters, ...sorter }
+ : { ...beforeParams, ...sorter };
+ }
+
+ async function getTableData() {
+ // 濡傛灉杩欐鍜屼笂娆＄殑filter涓嶅悓锛岄偅涔堝氨閲嶇疆椤电爜
+ if (!isEqual(unref(filters), lastFilters)) {
+ pagination.currentPage = 1;
+ lastFilters = clone(unref(filters));
+ }
+ loading.value = true;
+ api({
+ ...getFinalParams(),
+ current: pagination.currentPage,
+ size: pagination.pageSize
+ }).then(({ code, data, ...rest }) => {
+ if (code == 200) {
+ // pagination.currentPage = meta.current_page;
+ // pagination.pageSize = meta.per_page;
+ pagination.total = data.total;
+ others.value = rest;
+ dataList.value = data.records;
+ cb && cb(data);
+ loading.value = false;
+ } else {
+ loading.value = false;
+ // message(data.msg, { type: "error" });
+ }
+ });
+ }
+
+ function onSizeChange(val) {
+ pagination.pageSize = val;
+ pagination.currentPage = 1;
+ getTableData();
+ }
+
+ function onCurrentChange(val) {
+ loadingConfig.text = `姝ｅ湪鍔犺浇绗�${val}椤�...`;
+ loading.value = true;
+ getTableData();
+ }
+ function resetFilters() {
+ resetForm();
+ pagination.currentPage = 1;
+ getTableData();
+ }
+
+ watchEffect(() => {
+ pagination.align = paginationAlign.value;
+ });
+
+ // onMounted(() => {
+ // getTableData();
+ // });
+
+ return {
+ loading,
+ columns,
+ dataList,
+ pagination,
+ loadingConfig,
+ paginationAlign,
+ filters,
+ sorter,
+ others,
+ onSizeChange,
+ onCurrentChange,
+ getTableData,
+ resetFilters
+ };
+}
diff --git a/src/views/basicInformation/index.vue b/src/views/basicInformation/index.vue
new file mode 100644
index 0000000..62ceb31
--- /dev/null
+++ b/src/views/basicInformation/index.vue
@@ -0,0 +1,528 @@
+<template>
+ <div class="app-container">
+ <el-form :inline="true" :model="queryParams" class="search-form">
+ <el-form-item label="鎼滅储">
+ <el-input
+ v-model="queryParams.searchText"
+ placeholder="璇疯緭鍏ュ叧閿瘝"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="渚涘簲鍟嗗悕绉�">
+ <el-input
+ v-model="queryParams.supplierName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁熶竴浜鸿瘑鍒彿">
+ <el-input
+ v-model="queryParams.identifyNumber"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁忚惀鍦板潃">
+ <el-input
+ v-model="queryParams.address"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鏌ヨ</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <el-card>
+ <!-- 鏍囩椤� -->
+ <el-tabs
+ v-model="activeTab"
+ class="info-tabs"
+ @tab-click="handleTabClick"
+ >
+ <el-tab-pane
+ v-for="tab in tabs"
+ :key="tab.name"
+ :label="tab.label"
+ :name="tab.name"
+ />
+ </el-tabs>
+
+ <!-- 鎿嶄綔鎸夐挳鍖� -->
+ <el-row :gutter="24" class="table-toolbar">
+ <el-button type="primary" :icon="Plus" @click="handleAdd"
+ >鏂板缓</el-button
+ >
+ <el-button type="danger" :icon="Delete" @click="handleDelete">鍒犻櫎</el-button>
+ <el-button type="info" :icon="Download" @click="handleExport">瀵煎嚭</el-button>
+ </el-row>
+ <!-- 琛ㄦ牸缁勪欢 -->
+ <div>
+ <data-table
+ :loading="loading"
+ :table-data="tableData"
+ :columns="columns"
+ @selection-change="handleSelectionChange"
+ @edit="handleEdit"
+ @delete="handleDeleteSuccess"
+ :show-selection="true"
+ :border="true"
+ :maxHeight="440"
+ />
+ </div>
+ <pagination
+ v-if="total>0"
+ :page-num="pageNum"
+ :page-size="pageSize"
+ :total="total"
+ @pagination="handleQuery"
+ :layout="'total, prev, pager, next, jumper'"
+ />
+ <Supplier
+ v-if="tabName === 'supplier'"
+ v-model:supplierDialogFormVisible="dialogFormVisible"
+ :form="form"
+ :title="title"
+ @submit="handleSubmit"
+ @beforeClose="handleBeforeClose"
+ @update:dialogFormVisible="handleDialogFormVisible"
+ :addOrEdit="addOrEdit"
+ />
+ <Customer
+ v-if="tabName === 'customer'"
+ v-model:customerDialogFormVisible="dialogFormVisible"
+ :form="form"
+ :title="title"
+ @submit="handleSubmit"
+ @beforeClose="handleBeforeClose"
+ />
+ <Coal
+ v-if="tabName === 'coal'"
+ v-model:coalDialogFormVisible="dialogFormVisible"
+ :form="form"
+ :title="title"
+ @submit="handleSubmit"
+ />
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue";
+import DataTable from "@/components/Table/ETable.vue";
+import Pagination from "@/components/Pagination";
+import Supplier from "./mould/supplier.vue";
+import Customer from "./mould/customer.vue";
+import Coal from "./mould/coal.vue";
+const { proxy } = getCurrentInstance()
+// 寮圭獥
+const customerDialogFormVisible = ref(false);
+const coalDialogFormVisible = ref(false);
+const supplierDialogFormVisible = ref(false);
+const dialogFormVisible = ref(false);
+const form = ref({});
+const title = ref("");
+const copyForm = ref({});
+// 褰撳墠鏍囩
+const tabName = ref("supplier");
+// 鐘舵�佸彉閲�
+const loading = ref(false);
+const total = ref(200);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const activeTab = ref("supplier");
+const selectedRows = ref([]);
+// 鏌ヨ鍙傛暟
+const queryParams = reactive({
+ searchText: "",
+ supplierName: "",
+ identifyNumber: "",
+ address: "",
+});
+onMounted(() => {
+ handleTabClick({ props: { name: "supplier" } });
+});
+const columns = ref();
+// 鏍囩椤垫暟鎹�
+const tabs = reactive([
+ { name: "supplier", label: "渚涘簲鍟嗕俊鎭�" },
+ { name: "customer", label: "瀹㈡埛淇℃伅" },
+ { name: "coal", label: "鐓ょ淇℃伅" },
+]);
+// 鏄惁缂栬緫
+const addOrEdit = ref("add");
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([]);
+// 鏂规硶瀹氫箟
+const handleQuery = () => {
+ loading.value = true;
+ setTimeout(() => {
+ loading.value = false;
+ }, 500);
+};
+// supplier 渚涘簲鍟嗘暟鎹�
+const supplierColumns = reactive([
+ { prop: "supplierName", label: "渚涘簲鍟嗗悕绉�", minWidth: 200 },
+ { prop: "identifyNumber", label: "缁熶竴浜鸿瘑鍒彿", minWidth: 120 },
+ { prop: "address", label: "缁忚惀鍦板潃", minWidth: 150 },
+ { prop: "bank", label: "寮�鎴疯", minWidth: 120 },
+ { prop: "bankAccount", label: "閾惰璐﹀彿", minWidth: 150 },
+ { prop: "contacts", label: "鑱旂郴浜�", minWidth: 100 },
+ { prop: "contactAddress", label: "鑱旂郴鍦板潃", minWidth: 150 },
+ { prop: "maintainer", label: "缁存姢浜�", minWidth: 100 },
+ { prop: "maintainDate", label: "缁存姢鏃ユ湡", minWidth: 100 },
+]);
+// customer 瀹㈡埛鏁版嵁
+const customerColumns = reactive([
+ { prop: "customerName", label: "瀹㈡埛鍚嶇О", minWidth: 200 },
+ { prop: "identifyNumber", label: "缁熶竴浜鸿瘑鍒彿", minWidth: 120 },
+ { prop: "address", label: "缁忚惀鍦板潃", minWidth: 150 },
+ { prop: "bank", label: "寮�鎴疯", minWidth: 120 },
+ { prop: "bankAccount", label: "閾惰璐﹀彿", minWidth: 150 },
+ { prop: "contacts", label: "鑱旂郴浜�", minWidth: 100 },
+ { prop: "contactAddress", label: "鑱旂郴鍦板潃", minWidth: 150 },
+ { prop: "maintainer", label: "缁存姢浜�", minWidth: 100 },
+ { prop: "maintainDate", label: "缁存姢鏃ユ湡", minWidth: 100 },
+]);
+// coal 鐓ょ鏁版嵁
+const coalColumns = reactive([
+ { prop: "coalName", label: "鐓ょ鍚嶇О", minWidth: 200 },
+ { prop: "maintainer", label: "缁存姢浜�", minWidth: 120 },
+ { prop: "maintenanceDate", label: "缁存姢鏃ユ湡", minWidth: 150 },
+]);
+// 鏍囩椤电偣鍑�
+const handleTabClick = (tab) => {
+ form.value = {};
+ getList();
+ addOrEdit.value = "add";
+ loading.value = true;
+ tabName.value = tab.props.name;
+ tableData.value = [];
+ getList();
+ switch (tabName.value) {
+ case "supplier":
+ columns.value = supplierColumns;
+ dialogFormVisible.value = supplierDialogFormVisible.value;
+ break;
+ case "customer":
+ columns.value = customerColumns;
+ dialogFormVisible.value = customerDialogFormVisible.value;
+ break;
+ case "coal":
+ columns.value = coalColumns;
+ dialogFormVisible.value = coalDialogFormVisible.value;
+ break;
+ }
+ setTimeout(() => {
+ loading.value = false;
+ }, 500);
+};
+// 閲嶇疆鏌ヨ
+const resetQuery = () => {
+ Object.keys(queryParams).forEach((key) => {
+ if (key !== "pageNum" && key !== "pageSize") {
+ queryParams[key] = "";
+ }
+ });
+ handleQuery();
+};
+// 鏂板
+const handleAdd = () => {
+ addOrEdit.value = "add";
+ handleAddEdit(tabName.value);
+};
+// 鏂板缂栬緫
+const handleAddEdit = (tabName) => {
+ addOrEdit.value == "add" ? (title.value = "鏂板") : (title.value = "缂栬緫");
+ if (tabName === "supplier") {
+ dialogFormVisible.value = true;
+ title.value = title.value + "渚涘簲鍟嗕俊鎭�";
+ openDialog();
+ } else if (tabName === "customer") {
+ dialogFormVisible.value = true;
+ title.value = title.value + "瀹㈡埛淇℃伅";
+ openDialog();
+ } else if (tabName === "coal") {
+ dialogFormVisible.value = true;
+ title.value = title.value + "鐓ょ淇℃伅";
+ openDialog();
+ }
+};
+// 鎵撳紑寮圭獥
+const openDialog = () => {
+ if (addOrEdit.value === "edit") {
+ copyForm.value = JSON.parse(JSON.stringify(form.value));
+ dialogFormVisible.value = true;
+ return;
+ }
+ form.value = {};
+ dialogFormVisible.value = true;
+};
+// 鎻愪氦琛ㄥ崟
+const handleSubmit = (val) => {
+ // 鎷垮埌鎻愪氦鏁版嵁
+ dialogFormVisible.value = false;
+ getList();
+};
+const handleDialogFormVisible = (value) => {
+ dialogFormVisible.value = value;
+};
+// 閫夋嫨琛�
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
+// 缂栬緫
+const handleEdit = (row) => {
+ form.value = JSON.parse(JSON.stringify(row));
+ addOrEdit.value = "edit";
+ handleAddEdit(tabName.value);
+};
+// 鎵归噺鍒犻櫎
+const handleDelete = () => {
+ if (selectedRows.value.length === 0) {
+ ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ return;
+ }
+ ElMessageBox.confirm("纭畾鍒犻櫎閫変腑鐨勬暟鎹悧锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ ElMessage.success("鍒犻櫎鎴愬姛锛屽叡鍒犻櫎" + selectedRows.value.length + "鏉℃暟鎹�");
+ selectedRows.value.forEach((row) => {
+ tableData.value = tableData.value.filter(
+ (item) => item !== row
+ );
+ });
+ total.value = tableData.value.length;
+ // 娓呯┖閫変腑琛�
+ selectedRows.value = [];
+ }).catch(() => {
+ ElMessage.info("宸插彇娑堝垹闄ゆ搷浣�");
+ });
+}
+// 琛ㄦ牸鍒犻櫎
+const handleDeleteSuccess = (row) => {
+ ElMessage.success("鍒犻櫎鎴愬姛锛�" + row.supplierName);
+};
+// 鍏抽棴寮圭獥
+const handleBeforeClose = () => {
+ dialogFormVisible.value = false;
+ form.value = {};
+};
+const handleExport = (row) => {
+ proxy.download("system/post/export", {
+ ...queryParams.value
+ }, `post_${new Date().getTime()}.xlsx`)
+ ElMessage.success("瀵煎嚭鏁版嵁锛�" + row.supplierName);
+};
+const getList = () => {
+ loading.value = true;
+ setTimeout(() => {
+ // 鏆傛椂寮曞叆娴嬭瘯鏁版嵁
+ tableData.value = [
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "123412123123123111",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ contactsPhone: "19345678901",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "123412123123123111",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ contactsPhone: "19345678901",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "123412123123123111",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ contactsPhone: "19345678901",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ ];
+ total.value = tableData.value.length;
+ loading.value = false;
+ }, 500);
+};
+getList();
+</script>
+
+<style scoped>
+.app-container{
+ box-sizing: border-box;
+}
+.search-form {
+ background-color: #fff;
+ padding: 20px 20px 0 20px;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ box-shadow: var(--el-box-shadow-light);
+}
+.search-form :deep(.el-form-item) {
+ margin-bottom: 16px;
+ width: 100%;
+}
+
+/* 鍝嶅簲寮忓竷灞� */
+@media screen and (min-width: 768px) {
+ .search-form :deep(.el-form-item) {
+ width: 50%;
+ }
+}
+@media screen and (min-width: 1200px) {
+ .search-form :deep(.el-form-item) {
+ width: 18%;
+ }
+}
+.info-tabs {
+ margin-bottom: 20px;
+}
+.table-toolbar {
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+/* 鍝嶅簲寮忚〃鏍� */
+@media screen and (max-width: 768px) {
+ .table-toolbar {
+ flex-direction: column;
+ }
+ .table-toolbar .el-button {
+ width: 100%;
+ }
+}
+/* 琛ㄦ牸宸ュ叿鏍� */
+.table-toolbar, .table-toolbar > * {
+ margin: 0 0 0 0 !important;
+}
+.table-toolbar{
+ margin-bottom: 20px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/basicInformation/indexs.vue b/src/views/basicInformation/indexs.vue
new file mode 100644
index 0000000..7a9559d
--- /dev/null
+++ b/src/views/basicInformation/indexs.vue
@@ -0,0 +1,541 @@
+<template>
+ <div class="app-container">
+ <el-form :inline="true" :model="queryParams" class="search-form">
+ <el-form-item label="鎼滅储">
+ <el-input
+ v-model="queryParams.searchText"
+ placeholder="璇疯緭鍏ュ叧閿瘝"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="渚涘簲鍟嗗悕绉�">
+ <el-input
+ v-model="queryParams.supplierName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁熶竴浜鸿瘑鍒彿">
+ <el-input
+ v-model="queryParams.identifyNumber"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁忚惀鍦板潃">
+ <el-input
+ v-model="queryParams.address"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鏌ヨ</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <el-card>
+ <!-- 鏍囩椤� -->
+ <el-tabs
+ v-model="activeTab"
+ class="info-tabs"
+ @tab-click="handleTabClick"
+ >
+ <el-tab-pane
+ v-for="tab in tabs"
+ :key="tab.name"
+ :label="tab.label"
+ :name="tab.name"
+ />
+ </el-tabs>
+
+ <!-- 鎿嶄綔鎸夐挳鍖� -->
+ <el-row :gutter="24" class="table-toolbar">
+ <el-button type="primary" :icon="Plus" @click="handleAdd"
+ >鏂板缓</el-button
+ >
+ <el-button type="danger" :icon="Delete">鍒犻櫎</el-button>
+ <el-button type="info" :icon="Download" @click="handleExport">瀵煎嚭</el-button>
+ </el-row>
+ <!-- 琛ㄦ牸缁勪欢 -->
+ <div>
+ <data-table
+ :loading="loading"
+ :table-data="tableData"
+ :columns="columns"
+ @selection-change="handleSelectionChange"
+ @edit="handleEdit"
+ @delete="handleDeleteSuccess"
+ :show-selection="true"
+ :border="true"
+ :maxHeight="440"
+ />
+ </div>
+ <pagination
+ v-if="total>0"
+ :page-num="queryParams.pageNum"
+ :page-size="queryParams.pageSize"
+ :total="total"
+ @pagination="handleQuery"
+ :layout="'total, prev, pager, next, jumper'"
+ />
+ <Supplier
+ v-if="tabName === 'supplier'"
+ v-model:supplierDialogFormVisible="dialogFormVisible"
+ :form="form"
+ :title="title"
+ @submit="handleSubmit"
+ @beforeClose="handleBeforeClose"
+ @update:dialogFormVisible="handleDialogFormVisible"
+ :addOrEdit="addOrEdit"
+ />
+ <Customer
+ v-if="tabName === 'customer'"
+ v-model:customerDialogFormVisible="dialogFormVisible"
+ :form="form"
+ :title="title"
+ @submit="handleSubmit"
+ @beforeClose="handleBeforeClose"
+ />
+ <Coal
+ v-if="tabName === 'coal'"
+ v-model:coalDialogFormVisible="dialogFormVisible"
+ :form="form"
+ :title="title"
+ @submit="handleSubmit"
+ />
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { usePaginationApi } from "../../../hooks/usePaginationApi";
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue";
+import DataTable from "@/components/Table/ETable.vue";
+import Pagination from "@/components/Pagination";
+import Supplier from "./mould/supplier.vue";
+import Customer from "./mould/customer.vue";
+import Coal from "./mould/coal.vue";
+const { proxy } = getCurrentInstance()
+
+const {
+ columns
+} = usePaginationApi(()=> {
+ // 鍒嗛〉閫昏緫鍙互鍦ㄨ繖閲屽鐞�
+},{
+ searchText: "",
+ supplierName: "",
+ identifyNumber: "",
+ address: "",
+ pageNum: 1,
+ pageSize: 10,
+},[
+ { prop: "supplierName", label: "渚涘簲鍟嗗悕绉�", minWidth: 200 },
+ { prop: "identifyNumber", label: "缁熶竴浜鸿瘑鍒彿", minWidth: 120 },
+ { prop: "address", label: "缁忚惀鍦板潃", minWidth: 150 },
+ { prop: "bank", label: "寮�鎴疯", minWidth: 120 },
+ { prop: "bankAccount", label: "閾惰璐﹀彿", minWidth: 150 },
+ { prop: "contacts", label: "鑱旂郴浜�", minWidth: 100 },
+ { prop: "contactAddress", label: "鑱旂郴鍦板潃", minWidth: 150 },
+ { prop: "maintainer", label: "缁存姢浜�", minWidth: 100 },
+ { prop: "maintainDate", label: "缁存姢鏃ユ湡", minWidth: 100 },
+]);
+
+
+
+
+
+// 寮圭獥
+const customerDialogFormVisible = ref(false);
+const coalDialogFormVisible = ref(false);
+const supplierDialogFormVisible = ref(false);
+const dialogFormVisible = ref(false);
+const form = ref({});
+const title = ref("");
+const copyForm = ref({});
+// 褰撳墠鏍囩
+const tabName = ref("supplier");
+// 鐘舵�佸彉閲�
+const loading = ref(false);
+const total = ref(200);
+const activeTab = ref("supplier");
+const selectedRows = ref([]);
+// 鏌ヨ鍙傛暟
+const queryParams = reactive({
+ searchText: "",
+ supplierName: "",
+ identifyNumber: "",
+ address: "",
+ pageNum: 1,
+ pageSize: 10,
+});
+onMounted(() => {
+ handleTabClick({ props: { name: "supplier" } });
+});
+// 鏍囩椤垫暟鎹�
+const tabs = reactive([
+ { name: "supplier", label: "渚涘簲鍟嗕俊鎭�" },
+ { name: "customer", label: "瀹㈡埛淇℃伅" },
+ { name: "coal", label: "鐓ょ淇℃伅" },
+]);
+// 鏄惁缂栬緫
+const addOrEdit = ref("add");
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([]);
+// 鏂规硶瀹氫箟
+const handleQuery = () => {
+ loading.value = true;
+ // 杩欓噷娣诲姞瀹為檯鐨勬煡璇㈤�昏緫
+ setTimeout(() => {
+ loading.value = false;
+ }, 500);
+};
+
+/* // supplier 渚涘簲鍟嗘暟鎹�
+const supplierColumns = reactive([
+ { prop: "supplierName", label: "渚涘簲鍟嗗悕绉�", minWidth: 200 },
+ { prop: "identifyNumber", label: "缁熶竴浜鸿瘑鍒彿", minWidth: 120 },
+ { prop: "address", label: "缁忚惀鍦板潃", minWidth: 150 },
+ { prop: "bank", label: "寮�鎴疯", minWidth: 120 },
+ { prop: "bankAccount", label: "閾惰璐﹀彿", minWidth: 150 },
+ { prop: "contacts", label: "鑱旂郴浜�", minWidth: 100 },
+ { prop: "contactAddress", label: "鑱旂郴鍦板潃", minWidth: 150 },
+ { prop: "maintainer", label: "缁存姢浜�", minWidth: 100 },
+ { prop: "maintainDate", label: "缁存姢鏃ユ湡", minWidth: 100 },
+]);
+// customer 瀹㈡埛鏁版嵁
+const customerColumns = reactive([
+ { prop: "customerName", label: "瀹㈡埛鍚嶇О", minWidth: 200 },
+ { prop: "identifyNumber", label: "缁熶竴浜鸿瘑鍒彿", minWidth: 120 },
+ { prop: "address", label: "缁忚惀鍦板潃", minWidth: 150 },
+ { prop: "bank", label: "寮�鎴疯", minWidth: 120 },
+ { prop: "bankAccount", label: "閾惰璐﹀彿", minWidth: 150 },
+ { prop: "contacts", label: "鑱旂郴浜�", minWidth: 100 },
+ { prop: "contactAddress", label: "鑱旂郴鍦板潃", minWidth: 150 },
+ { prop: "maintainer", label: "缁存姢浜�", minWidth: 100 },
+ { prop: "maintainDate", label: "缁存姢鏃ユ湡", minWidth: 100 },
+]);
+// coal 鐓ょ鏁版嵁
+const coalColumns = reactive([
+ { prop: "coalName", label: "鐓ょ鍚嶇О", minWidth: 200 },
+ { prop: "maintainer", label: "缁存姢浜�", minWidth: 120 },
+ { prop: "maintenanceDate", label: "缁存姢鏃ユ湡", minWidth: 150 },
+]); */
+
+// 鏍囩椤电偣鍑�
+const handleTabClick = (tab) => {
+ loading.value = true;
+ tabName.value = tab.props.name;
+ tableData.value = [];
+ getList();
+ switch (tabName.value) {
+ case "supplier":
+ dialogFormVisible.value = supplierDialogFormVisible.value;
+ break;
+ case "customer":
+ columns.value = customerColumns;
+ dialogFormVisible.value = customerDialogFormVisible.value;
+ break;
+ case "coal":
+ columns.value = coalColumns;
+ dialogFormVisible.value = coalDialogFormVisible.value;
+ break;
+ }
+ setTimeout(() => {
+ loading.value = false;
+ }, 500);
+};
+// 閲嶇疆鏌ヨ
+const resetQuery = () => {
+ Object.keys(queryParams).forEach((key) => {
+ if (key !== "pageNum" && key !== "pageSize") {
+ queryParams[key] = "";
+ }
+ });
+ handleQuery();
+};
+// 鏂板
+const handleAdd = () => {
+ addOrEdit.value = "add";
+ handleAddEdit(tabName.value);
+};
+// 鏂板缂栬緫
+const handleAddEdit = (tabName) => {
+ addOrEdit.value == "add" ? (title.value = "鏂板") : (title.value = "缂栬緫");
+ if (tabName === "supplier") {
+ dialogFormVisible.value = true;
+ title.value = title.value + "渚涘簲鍟嗕俊鎭�";
+ openDialog();
+ } else if (tabName === "customer") {
+ dialogFormVisible.value = true;
+ title.value = title.value + "瀹㈡埛淇℃伅";
+ openDialog();
+ } else if (tabName === "coal") {
+ dialogFormVisible.value = true;
+ title.value = title.value + "鐓ょ淇℃伅";
+ openDialog();
+ }
+};
+// 鎵撳紑寮圭獥
+const openDialog = () => {
+ if (addOrEdit.value === "edit") {
+ copyForm.value = JSON.parse(JSON.stringify(form.value));
+ dialogFormVisible.value = true;
+ return;
+ }
+ form.value = {};
+ dialogFormVisible.value = true;
+};
+
+// 鎻愪氦琛ㄥ崟
+const handleSubmit = (val) => {
+ // 鎷垮埌鎻愪氦鏁版嵁
+ dialogFormVisible.value = false;
+ getList();
+};
+const handleDialogFormVisible = (value) => {
+ dialogFormVisible.value = value;
+};
+// 閫夋嫨琛�
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
+// 缂栬緫
+const handleEdit = (row) => {
+ if (row.supplierName) {
+ form.value = JSON.parse(JSON.stringify(row));
+ addOrEdit.value = "edit";
+ handleAddEdit(tabName.value);
+ return;
+ }
+ if (selectedRows.value.length === 1) {
+ form.value = JSON.parse(JSON.stringify(selectedRows.value[0]));
+ addOrEdit.value = "edit";
+ handleAddEdit(tabName.value);
+ return;
+ } else {
+ ElMessage.warning("璇烽�夋嫨涓�鏉℃暟鎹慨鏀�");
+ }
+};
+
+const handleDeleteSuccess = (row) => {
+ ElMessage.success("鍒犻櫎鎴愬姛锛�" + row.supplierName);
+};
+// 鍏抽棴寮圭獥
+const handleBeforeClose = () => {
+ dialogFormVisible.value = false;
+ form.value = {};
+};
+const handleExport = (row) => {
+ proxy.download("system/post/export", {
+ ...queryParams.value
+ }, `post_${new Date().getTime()}.xlsx`)
+ ElMessage.success("瀵煎嚭鏁版嵁锛�" + row.supplierName);
+};
+const getList = () => {
+ loading.value = true;
+ setTimeout(() => {
+ tableData.value = [
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "123412123123123111",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ contactsPhone: "19345678901",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "123412123123123111",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ contactsPhone: "19345678901",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "123412123123123111",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ contactsPhone: "19345678901",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ {
+ supplierName: "涓浗鍐堕噾绉戝伐鑲′唤鏈夐檺鍏徃",
+ identifyNumber: "019-65851198",
+ address: "灞辫タ鐪�",
+ bank: "浜ら�氶摱琛�",
+ bankAccount: "901234567890123456",
+ contacts: "鏉庨洩鑺�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鏉庨洩鑺�",
+ maintainDate: "2022-09-26",
+ },
+ {
+ supplierName: "浜ら�氶摱琛岃偂浠芥湁闄愬叕鍙�",
+ identifyNumber: "042-26881314",
+ address: "姹熻タ鐪�",
+ bank: "骞冲畨閾惰",
+ bankAccount: "123456789012345678",
+ contacts: "鍛ㄧ櫧鐜�",
+ contactAddress: "XX鐪乆X甯俋X鍖篨X璺�",
+ maintainer: "鍛ㄧ櫧鐜�",
+ maintainDate: "2022-08-29",
+ },
+ ];
+ total.value = tableData.value.length;
+ loading.value = false;
+ }, 500);
+};
+getList();
+</script>
+
+<style scoped>
+.app-container{
+ box-sizing: border-box;
+}
+.search-form {
+ background-color: #fff;
+ padding: 20px 20px 0 20px;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ box-shadow: var(--el-box-shadow-light);
+}
+.search-form :deep(.el-form-item) {
+ margin-bottom: 16px;
+ width: 100%;
+}
+
+/* 鍝嶅簲寮忓竷灞� */
+@media screen and (min-width: 768px) {
+ .search-form :deep(.el-form-item) {
+ width: 50%;
+ }
+}
+@media screen and (min-width: 1200px) {
+ .search-form :deep(.el-form-item) {
+ width: 18%;
+ }
+}
+.info-tabs {
+ margin-bottom: 20px;
+}
+.table-toolbar {
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+/* 鍝嶅簲寮忚〃鏍� */
+@media screen and (max-width: 768px) {
+ .table-toolbar {
+ flex-direction: column;
+ }
+ .table-toolbar .el-button {
+ width: 100%;
+ }
+}
+/* 琛ㄦ牸宸ュ叿鏍� */
+.table-toolbar, .table-toolbar > * {
+ margin: 0 0 0 0 !important;
+}
+.table-toolbar{
+ margin-bottom: 20px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/basicInformation/mould/coal.vue b/src/views/basicInformation/mould/coal.vue
new file mode 100644
index 0000000..0a999c2
--- /dev/null
+++ b/src/views/basicInformation/mould/coal.vue
@@ -0,0 +1,155 @@
+<template>
+ <div>
+ <el-dialog
+ v-model="dialogVisible"
+ :title="title"
+ width="800"
+ :close-on-click-modal="false"
+ :before-close="handleClose"
+ >
+ <el-form
+ ref="formRef"
+ style="max-width: 600px; margin: 0 auto"
+ :model="formData"
+ :rules="rules"
+ label-width="auto"
+ >
+ <el-form-item label="鍗¤儭" prop="supplierName">
+ <el-input
+ v-model="formData.supplierName"
+ placeholder="璇疯緭鍏ヤ緵璐у晢鍚嶇О"
+ />
+ </el-form-item>
+ <el-form-item label="绾崇◣浜鸿瘑鍒彿" prop="identifyNumber">
+ <el-input
+ v-model="formData.identifyNumber"
+ placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�"
+ />
+ </el-form-item>
+ <el-form-item label="缁忚惀鍦板潃" prop="address">
+ <el-select v-model="formData.address" placeholder="璇烽�夋嫨缁忚惀鍦板潃">
+ <el-option label="Zone one" value="shanghai" />
+ <el-option label="Zone two" value="beijing" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="閾惰璐︽埛" prop="bankAccount">
+ <el-input
+ v-model="formData.bankAccount"
+ placeholder="璇疯緭鍏ラ摱琛岃处鎴�"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="submitForm"> 纭畾 </el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, watch, defineProps } from "vue";
+
+const props = defineProps({
+ beforeClose: {
+ type: Function,
+ default: () => {},
+ },
+ form: {
+ type: Object,
+ default: () => ({}),
+ },
+ addOrEdit: {
+ type: String,
+ default: "add",
+ },
+ title: {
+ type: String,
+ default: "",
+ },
+});
+
+const emit = defineEmits([
+ "submit",
+ "handleBeforeClose",
+ "update:coalDialogFormVisible",
+]);
+
+// 琛ㄥ崟寮曠敤
+const formRef = ref(null);
+// 琛ㄥ崟鏁版嵁
+const formData = ref({ ...props.form });
+// 寮圭獥鍙鎬�
+const dialogVisible = defineModel("coalDialogFormVisible", {
+ required: true,
+ type: Boolean,
+});
+
+// 鐩戝惉澶栭儴浼犲叆鐨勮〃鍗曟暟鎹彉鍖�
+watch(
+ () => props.form,
+ (newVal) => {
+ formData.value = { ...newVal };
+ },
+ { deep: true }
+);
+
+// 鐩戝惉鍐呴儴寮圭獥鐘舵�佸彉鍖�
+watch(
+ () => dialogVisible.value,
+ (newVal) => {
+ emit("update:coalDialogFormVisible", newVal);
+ }
+);
+
+// 鎻愪氦琛ㄥ崟
+const submitForm = async () => {
+ if (!formRef.value) return;
+ await formRef.value.validate((valid, fields) => {
+ if (valid) {
+ emit("submit", formData.value);
+ }
+ });
+};
+// 鍙栨秷琛ㄥ崟
+const cancelForm = () => {
+ emit("update:coalDialogFormVisible", false);
+ formData.value = {};
+};
+// 閲嶇疆琛ㄥ崟
+const resetForm = () => {
+ if (!formRef.value) return;
+ formRef.value.resetFields();
+};
+// 鍏抽棴寮圭獥
+const handleClose = () => {
+ // 瑙﹀彂鐖剁粍浠剁殑鍏抽棴鍑芥暟
+ emit("handleBeforeClose");
+ emit("update:coalDialogFormVisible", false);
+};
+const rules = reactive({
+ supplierName: [
+ { required: true, message: "璇疯緭鍏ヤ緵璐у晢鍚嶇О", trigger: "blur" },
+ ],
+ identifyNumber: [
+ { required: true, message: "璇锋纭緭鍏ョ撼绋庝汉璇嗗埆鍙�", trigger: "blur" },
+ { min: 17, max: 20, message: "璇疯緭鍏�17-20浣嶇撼绋庝汉璇嗗埆鍙�", trigger: "blur" },
+ ],
+ address: [
+ {
+ required: true,
+ message: "璇烽�夋嫨缁忚惀鍦板潃",
+ trigger: "change",
+ },
+ ],
+ bankAccount: [{ required: true, message: "璇疯緭鍏ラ摱琛岃处鎴�", trigger: "blur" }],
+ bank: [{ required: true, message: "璇疯緭鍏ュ紑鎴疯", trigger: "blur" }],
+ contacts: [{ required: true, message: "璇疯緭鍏ュ紑鎴疯", trigger: "blur" }],
+ contactsPhone: [
+ { required: true, message: "璇疯緭鍏ヨ仈绯讳汉", trigger: "blur" },
+ { min: 11, max: 11, message: "璇疯緭鍏�11浣嶈仈绯讳汉鐢佃瘽", trigger: "blur" },
+ ],
+});
+</script>
+
+<style lang="sass" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/basicInformation/mould/customer.vue b/src/views/basicInformation/mould/customer.vue
new file mode 100644
index 0000000..b35a6d5
--- /dev/null
+++ b/src/views/basicInformation/mould/customer.vue
@@ -0,0 +1,140 @@
+<template>
+ <div>
+ <el-dialog
+ v-model="dialogVisible"
+ :title="title"
+ width="800"
+ :close-on-click-modal="false"
+ :before-close="handleClose"
+ >
+ <el-form
+ ref="formRef"
+ style="max-width: 600px; margin: 0 auto"
+ :model="formData"
+ :rules="rules"
+ label-width="auto"
+ >
+ <el-form-item label="鍗¤儭" prop="supplierName">
+ <el-input
+ v-model="formData.supplierName"
+ placeholder="璇疯緭鍏ヤ緵璐у晢鍚嶇О"
+ />
+ </el-form-item>
+ <el-form-item label="绾崇◣浜鸿瘑鍒彿" prop="identifyNumber">
+ <el-input
+ v-model="formData.identifyNumber"
+ placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�"
+ />
+ </el-form-item>
+ <el-form-item label="缁忚惀鍦板潃" prop="address">
+ <el-select v-model="formData.address" placeholder="璇烽�夋嫨缁忚惀鍦板潃">
+ <el-option label="Zone one" value="shanghai" />
+ <el-option label="Zone two" value="beijing" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="閾惰璐︽埛" prop="bankAccount">
+ <el-input v-model="formData.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鎴�" />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="submitForm">
+ 纭畾
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, watch ,defineProps } from 'vue'
+
+const props = defineProps({
+ beforeClose: {
+ type: Function,
+ default: () => {}
+ },
+ form: {
+ type: Object,
+ default: () => ({})
+ },
+ addOrEdit: {
+ type: String,
+ default: 'add'
+ },
+ title: {
+ type: String,
+ default: ''
+ },
+})
+
+const emit = defineEmits(['submit', 'handleBeforeClose','update:customerDialogFormVisible'])
+
+// 琛ㄥ崟寮曠敤
+const formRef = ref(null)
+// 琛ㄥ崟鏁版嵁
+const formData = ref({ ...props.form })
+// 寮圭獥鍙鎬�
+const dialogVisible = defineModel("customerDialogFormVisible",{required:true,type:Boolean})
+
+// 鐩戝惉澶栭儴浼犲叆鐨勮〃鍗曟暟鎹彉鍖�
+watch(() => props.form, (newVal) => {
+ formData.value = { ...newVal }
+}, { deep: true })
+
+// 鐩戝惉鍐呴儴寮圭獥鐘舵�佸彉鍖�
+watch(() => dialogVisible.value, (newVal) => {
+ emit('update:customerDialogFormVisible', newVal)
+})
+
+// 鎻愪氦琛ㄥ崟
+const submitForm = async () => {
+ if (!formRef.value) return
+ await formRef.value.validate((valid, fields) => {
+ if (valid) {
+ emit('submit', formData.value)
+ }
+ })
+}
+// 鍙栨秷琛ㄥ崟
+const cancelForm = () => {
+ emit('update:customerDialogFormVisible', false)
+ formData.value = {}
+}
+// 閲嶇疆琛ㄥ崟
+const resetForm = () => {
+ if (!formRef.value) return
+ formRef.value.resetFields()
+}
+// 鍏抽棴寮圭獥
+const handleClose = () => {
+ // 瑙﹀彂鐖剁粍浠剁殑鍏抽棴鍑芥暟
+ emit("handleBeforeClose")
+ emit('update:customerDialogFormVisible', false)
+}
+const rules = reactive({
+ supplierName: [
+ { required: true, message: "璇疯緭鍏ヤ緵璐у晢鍚嶇О", trigger: "blur" },
+ ],
+ identifyNumber: [
+ { required: true, message: "璇锋纭緭鍏ョ撼绋庝汉璇嗗埆鍙�", trigger: "blur" },
+ { min: 17, max: 20, message: "璇疯緭鍏�17-20浣嶇撼绋庝汉璇嗗埆鍙�", trigger: "blur" },
+ ],
+ address: [
+ {
+ required: true,
+ message: "璇烽�夋嫨缁忚惀鍦板潃",
+ trigger: "change",
+ },
+ ],
+ bankAccount: [{ required: true, message: "璇疯緭鍏ラ摱琛岃处鎴�", trigger: "blur" }],
+ bank: [{ required: true, message: "璇疯緭鍏ュ紑鎴疯", trigger: "blur" }],
+ contacts: [{ required: true, message: "璇疯緭鍏ュ紑鎴疯", trigger: "blur" }],
+ contactsPhone: [
+ { required: true, message: "璇疯緭鍏ヨ仈绯讳汉", trigger: "blur" },
+ { min: 11, max: 11, message: "璇疯緭鍏�11浣嶈仈绯讳汉鐢佃瘽", trigger: "blur" },
+ ],
+});
+</script>
+
+<style lang="sass" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/basicInformation/mould/supplier.vue b/src/views/basicInformation/mould/supplier.vue
new file mode 100644
index 0000000..0b1d5ec
--- /dev/null
+++ b/src/views/basicInformation/mould/supplier.vue
@@ -0,0 +1,154 @@
+<template>
+ <div>
+ <el-dialog
+ v-model="dialogVisible"
+ :title="title"
+ width="800"
+ :close-on-click-modal="false"
+ :before-close="handleClose"
+ >
+ <el-form
+ ref="formRef"
+ style="max-width: 600px; margin: 0 auto"
+ :model="formData"
+ :rules="rules"
+ label-width="auto"
+ >
+ <el-form-item label="瀹㈡埛鍚嶇О" prop="supplierName">
+ <el-input
+ v-model="formData.supplierName"
+ placeholder="璇疯緭鍏ヤ緵璐у晢鍚嶇О"
+ />
+ </el-form-item>
+ <el-form-item label="绾崇◣浜鸿瘑鍒彿" prop="identifyNumber">
+ <el-input
+ v-model="formData.identifyNumber"
+ placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�"
+ />
+ </el-form-item>
+ <el-form-item label="缁忚惀鍦板潃" prop="address">
+ <el-select v-model="formData.address" placeholder="璇烽�夋嫨缁忚惀鍦板潃">
+ <el-option label="Zone one" value="shanghai" />
+ <el-option label="Zone two" value="beijing" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="閾惰璐︽埛" prop="bankAccount">
+ <el-input v-model="formData.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鎴�" />
+ </el-form-item>
+ <el-form-item label="寮�鎴疯" prop="bank">
+ <el-input v-model="formData.bank" placeholder="璇疯緭鍏ュ紑鎴疯" />
+ </el-form-item>
+ <el-form-item label="鑱旂郴浜�" prop="contacts">
+ <el-input v-model="formData.contacts" placeholder="璇疯緭鍏ヨ仈绯讳汉" />
+ </el-form-item>
+ <el-form-item label="鑱旂郴浜虹數璇�" prop="contactsPhone">
+ <el-input
+ v-model="formData.contactsPhone"
+ placeholder="璇疯緭鍏ヨ仈绯讳汉鐢佃瘽"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="submitForm">
+ 纭畾
+ </el-button>
+ <el-button v-if="addOrEdit === 'edit'" @click="resetForm">閲嶇疆</el-button>
+ <el-button v-if="addOrEdit === 'add'" @click="cancelForm">鍙栨秷</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, watch, defineProps } from 'vue'
+
+const props = defineProps({
+ beforeClose: {
+ type: Function,
+ default: () => {}
+ },
+ form: {
+ type: Object,
+ default: () => ({})
+ },
+ addOrEdit: {
+ type: String,
+ default: 'add'
+ },
+ title: {
+ type: String,
+ default: ''
+ },
+})
+
+const emit = defineEmits(['submit', 'handleBeforeClose'])
+
+// 琛ㄥ崟寮曠敤
+const formRef = ref(null)
+// 琛ㄥ崟鏁版嵁
+const formData = ref({ ...props.form })
+// 寮圭獥鍙鎬�
+const dialogVisible = defineModel("supplierDialogFormVisible",{required:true,type:Boolean})
+
+// 鐩戝惉澶栭儴浼犲叆鐨勮〃鍗曟暟鎹彉鍖�
+watch(() => props.form, (newVal) => {
+ formData.value = { ...newVal }
+}, { deep: true })
+
+// 鐩戝惉鍐呴儴寮圭獥鐘舵�佸彉鍖�
+watch(() => dialogVisible.value, (newVal) => {
+ emit('update:supplierDialogFormVisible', newVal)
+})
+
+// 鎻愪氦琛ㄥ崟
+const submitForm = async () => {
+ if (!formRef.value) return
+ await formRef.value.validate((valid, fields) => {
+ if (valid) {
+ emit('submit', formData.value)
+ }
+ })
+}
+// 鍙栨秷琛ㄥ崟
+const cancelForm = () => {
+ emit('update:supplierDialogFormVisible', false)
+ formData.value = {}
+}
+// 閲嶇疆琛ㄥ崟
+const resetForm = () => {
+ if (!formRef.value) return
+ formRef.value.resetFields()
+}
+// 鍏抽棴寮圭獥
+const handleClose = () => {
+ // 瑙﹀彂鐖剁粍浠剁殑鍏抽棴鍑芥暟
+ emit("handleBeforeClose")
+ emit('update:supplierDialogFormVisible', false)
+}
+const rules = reactive({
+ supplierName: [
+ { required: true, message: "璇疯緭鍏ヤ緵璐у晢鍚嶇О", trigger: "blur" },
+ ],
+ identifyNumber: [
+ { required: true, message: "璇锋纭緭鍏ョ撼绋庝汉璇嗗埆鍙�", trigger: "blur" },
+ { min: 17, max: 20, message: "璇疯緭鍏�17-20浣嶇撼绋庝汉璇嗗埆鍙�", trigger: "blur" },
+ ],
+ address: [
+ {
+ required: true,
+ message: "璇烽�夋嫨缁忚惀鍦板潃",
+ trigger: "change",
+ },
+ ],
+ bankAccount: [{ required: true, message: "璇疯緭鍏ラ摱琛岃处鎴�", trigger: "blur" }],
+ bank: [{ required: true, message: "璇疯緭鍏ュ紑鎴疯", trigger: "blur" }],
+ contacts: [{ required: true, message: "璇疯緭鍏ュ紑鎴疯", trigger: "blur" }],
+ contactsPhone: [
+ { required: true, message: "璇疯緭鍏ヨ仈绯讳汉", trigger: "blur" },
+ { min: 11, max: 11, message: "璇疯緭鍏�11浣嶈仈绯讳汉鐢佃瘽", trigger: "blur" },
+ ],
+});
+</script>
+
+<style lang="sass" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/procureMent/components/ProductionDialog.vue b/src/views/procureMent/components/ProductionDialog.vue
new file mode 100644
index 0000000..3da88f5
--- /dev/null
+++ b/src/views/procureMent/components/ProductionDialog.vue
@@ -0,0 +1,253 @@
+<template>
+ <div>
+ <el-dialog
+ v-model="dialogVisible"
+ :title="title"
+ width="600"
+ :close-on-click-modal="false"
+ @close="handleClose"
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="auto"
+ class="production-form"
+ label-position="right"
+ style="max-width: 400px; margin: 0 auto"
+ >
+ <el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName">
+ <el-input v-model="form.supplierName" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鐓ょ" prop="category">
+ <el-input v-model="form.category" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鍗曚綅" prop="unit">
+ <el-input v-model="form.unit" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="閲囪喘鏁伴噺" prop="purchaseAmount">
+ <el-input v-model="form.purchaseAmount" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鍗曚环(绋庡墠)" prop="priceBeforeTax">
+ <el-input v-model="form.priceBeforeTax" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鎬讳环(绋庡墠)" prop="totalBeforeTax">
+ <el-input v-model="form.totalBeforeTax" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鐑��" prop="calorificValue">
+ <el-input v-model="form.calorificValue" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鐧昏浜�" prop="registrant">
+ <el-input v-model="form.registrant" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鐧昏鏃ユ湡" prop="registrationDate">
+ <el-date-picker
+ v-model="form.registrationDate"
+ type="date"
+ placeholder="YYYY-MM-DD"
+ style="width: 100%"
+ value-format="YYYY-MM-DD"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="handleSubmit">淇濆瓨</el-button>
+ <!-- 閲嶇疆鍜屽彇娑� -->
+ <el-button
+ type="primary"
+ @click="handleClose"
+ v-if="title.includes('鏂板')"
+ >鍙栨秷</el-button
+ >
+ <el-button
+ type="primary"
+ @click="handleReset"
+ v-if="title.includes('缂栬緫')"
+ >閲嶇疆</el-button
+ >
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup name="ProductionDialog">
+import { ref, defineProps, watch } from "vue";
+import { ElMessage } from "element-plus";
+const props = defineProps({
+ title: {
+ type: String,
+ default: "",
+ },
+});
+const emit = defineEmits(["update:visible", "success"]);
+const dialogVisible = defineModel("dialogFormVisible", {
+ required: true,
+ type: Boolean,
+});
+const form = defineModel("form", {
+ required: true,
+ type: Object,
+});
+const rules = {
+ supplierName: [
+ { required: true, message: "璇疯緭鍏ヤ緵搴斿晢鍚嶇О", trigger: "blur" },
+ ],
+ category: [{ required: true, message: "璇疯緭鍏ョ叅绉�", trigger: "blur" }],
+ unit: [{ required: true, message: "璇疯緭鍏ュ崟浣�", trigger: "blur" }],
+ purchaseAmount: [
+ { required: true, message: "璇疯緭鍏ラ噰璐暟閲�", trigger: "blur" },
+ ],
+ priceBeforeTax: [{ required: true, message: "璇疯緭鍏ュ崟浠�", trigger: "blur" }],
+ totalBeforeTax: [{ required: true, message: "璇疯緭鍏ユ�讳环", trigger: "blur" }],
+ calorificValue: [{ required: true, message: "璇疯緭鍏ョ儹鍊�", trigger: "blur" }],
+ registrant: [{ required: true, message: "璇疯緭鍏ョ櫥璁颁汉", trigger: "blur" }],
+ registrationDate: [
+ { required: true, message: "璇烽�夋嫨鐧昏鏃ユ湡", trigger: "change" },
+ ],
+};
+// 鍏抽棴寮圭獥
+const handleClose = () => {
+ dialogVisible.value = false;
+ console.log(form.value);
+ // formRef.value?.resetFields()
+ // Object.assign(form, {
+ // })
+};
+const handleReset = () => {
+ if (!formRef.value) return;
+ formRef.value.resetFields();
+ ElMessage.success("琛ㄥ崟宸查噸缃�");
+};
+// 鎸佺画鐩戝惉form.value鐨勫彉鍖�
+watch(
+ () => form.value,
+ (val) => {
+ console.log(val);
+ }
+);
+const formRef = ref(null);
+// 鎻愪氦琛ㄥ崟
+const handleSubmit = async () => {
+ if (!formRef.value) return;
+ await formRef.value.validate((valid) => {
+ if (valid) {
+ try {
+ emit("success", { ...form.value });
+ handleClose();
+ ElMessage.success("淇濆瓨鎴愬姛");
+ } catch (error) {
+ console.error("淇濆瓨澶辫触:", error);
+ ElMessage.error("淇濆瓨澶辫触");
+ }
+ }
+ });
+};
+</script>
+
+<style lang="less" scoped>
+</style>
+
+<!-- <template>
+ <el-dialog
+ v-model="dialogFormVisible"
+ title="閲囪喘鐧昏鏂板"
+ width="500px"
+ :close-on-click-modal="false"
+ @close="handleClose"
+ >
+
+ </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, defineProps, defineEmits } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+ visible: {
+ type: Boolean,
+ default: false
+ }
+})
+
+const emit = defineEmits(['update:visible', 'success'])
+
+const dialogFormVisible = ref(false)
+const formRef = ref(null)
+
+// 琛ㄥ崟鏁版嵁
+const form = reactive({
+ supplierName: '',
+ category: '',
+ unit: '',
+ purchaseAmount: '',
+ priceBeforeTax: '',
+ totalBeforeTax: '',
+ calorificValue: '',
+ registrant: '',
+ registrationDate: ''
+})
+
+// 琛ㄥ崟楠岃瘉瑙勫垯
+
+
+// 鐩戝惉visible鍙樺寲
+watch(() => props.visible, (val) => {
+ dialogFormVisible.value = val
+})
+
+// 鐩戝惉dialogFormVisible鍙樺寲
+watch(() => dialogFormVisible.value, (val) => {
+ emit('update:visible', val)
+})
+
+// 鎻愪氦琛ㄥ崟
+const handleSubmit = async () => {
+ if (!formRef.value) return
+
+ await formRef.value.validate((valid) => {
+ if (valid) {
+ try {
+ emit('success', { ...form })
+ handleClose()
+ ElMessage.success('淇濆瓨鎴愬姛')
+ } catch (error) {
+ console.error('淇濆瓨澶辫触:', error)
+ ElMessage.error('淇濆瓨澶辫触')
+ }
+ }
+ })
+}
+
+// 鍙栨秷
+const handleCancel = () => {
+ handleClose()
+}
+</script>
+
+<style scoped>
+.production-form {
+ padding: 20px;
+}
+
+.dialog-footer {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+}
+
+:deep(.el-form-item__label) {
+ font-weight: normal;
+}
+
+:deep(.el-input),
+:deep(.el-date-picker) {
+ width: 100%;
+}
+
+:deep(.el-dialog__body) {
+ padding-top: 10px;
+}
+</style> -->
\ No newline at end of file
diff --git a/src/views/procureMent/index.vue b/src/views/procureMent/index.vue
new file mode 100644
index 0000000..790146a
--- /dev/null
+++ b/src/views/procureMent/index.vue
@@ -0,0 +1,308 @@
+<template>
+ <div class="app-container">
+ <el-form :inline="true" :model="queryParams" class="search-form">
+ <el-form-item label="鎼滅储">
+ <el-input
+ v-model="queryParams.searchText"
+ placeholder="璇疯緭鍏ュ叧閿瘝"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="渚涘簲鍟嗗悕绉�">
+ <el-input
+ v-model="queryParams.supplierName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁熶竴浜鸿瘑鍒彿">
+ <el-input
+ v-model="queryParams.identifyNumber"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁忚惀鍦板潃">
+ <el-input
+ v-model="queryParams.address"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鏌ヨ</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <el-card>
+ <!-- 鎿嶄綔鎸夐挳鍖� -->
+ <el-row :gutter="24" class="table-toolbar">
+ <el-button type="primary" :icon="Plus" @click="handleAdd"
+ >鏂板缓</el-button
+ >
+ <el-button type="danger" :icon="Delete" @click="handleDelete">鍒犻櫎</el-button>
+ <el-button type="info" :icon="Download" @click="handleExport">瀵煎嚭</el-button>
+ </el-row>
+ <!-- 琛ㄦ牸缁勪欢 -->
+ <data-table
+ :loading="loading"
+ :table-data="tableData"
+ :columns="columns"
+ @selection-change="handleSelectionChange"
+ @edit="handleEdit"
+ @delete="handleDeleteSuccess"
+ :show-selection="true"
+ :border="true"
+ :maxHeight="440"
+ />
+ <pagination
+ v-if="total>0"
+ :page-num="pageNum"
+ :page-size="pageSize"
+ :total="total"
+ @pagination="handleQuery"
+ :layout="'total, prev, pager, next, jumper'"
+ />
+ </el-card>
+ <ProductionDialog
+ v-if="total>0"
+ v-model:dialogFormVisible="dialogFormVisible"
+ :form="form"
+ :title="title"
+ @submit="handleSubmit"
+ @success="handleSuccess"
+ />
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue";
+import DataTable from "@/components/Table/ETable.vue";
+import Pagination from "@/components/Pagination";
+import ProductionDialog from "./components/ProductionDialog.vue";
+const { proxy } = getCurrentInstance()
+
+const dialogFormVisible = ref(false);
+const form = ref({});
+const title = ref("");
+// 鐘舵�佸彉閲�
+const loading = ref(false);
+const total = ref(0);
+const pageNum = ref(1)
+const pageSize = ref(10);
+const selectedRows = ref([]);
+// 鏌ヨ鍙傛暟
+const queryParams = reactive({
+ searchText: "",
+ supplierName: "",
+ identifyNumber: "",
+ address: "",
+
+});
+// 鏄惁缂栬緫
+const addOrEdit = ref("add");
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([]);
+// 鏂规硶瀹氫箟
+const handleQuery = () => {
+ loading.value = true;
+ // 杩欓噷娣诲姞瀹為檯鐨勬煡璇㈤�昏緫
+ setTimeout(() => {
+ loading.value = false;
+ }, 500);
+};
+
+// supplier 渚涘簲鍟嗘暟鎹�
+const columns = ref([
+ { prop: "supplierName", label: "渚涘簲鍟嗗悕绉�", minWidth: 200 },
+ { prop: "category", label: "鐓ょ", minWidth: 120 },
+ { prop: "unit", label: "鍗曚綅", minWidth: 150 },
+ { prop: "purchaseAmount", label: "閲囪喘鏁伴噺", minWidth: 120 },
+ { prop: "priceBeforeTax", label: "鍗曚环(绋庡墠)", minWidth: 150 },
+ { prop: "totalBeforeTax", label: "鎬讳环(绋庡墠)", minWidth: 100 },
+ { prop: "calorificValue", label: "鐑��", minWidth: 150 },
+ { prop: "registrant", label: "鐧昏浜�", minWidth: 100 },
+ { prop: "registrationDate", label: "鐧昏鏃ユ湡", minWidth: 100 },
+]);
+
+// 閲嶇疆鏌ヨ
+const resetQuery = () => {
+ Object.keys(queryParams).forEach((key) => {
+ if (key !== "pageNum" && key !== "pageSize") {
+ queryParams[key] = "";
+ }
+ });
+ handleQuery();
+};
+// 鏂板
+const handleAdd = () => {
+ addOrEdit.value = "add";
+ handleAddEdit();
+};
+// 鏂板缂栬緫
+const handleAddEdit = () => {
+ addOrEdit.value == "add" ? (title.value = "鏂板") : (title.value = "缂栬緫");
+ title.value = title.value + "閲囪喘淇℃伅";
+ openDialog();
+};
+// 鎵撳紑寮圭獥
+const openDialog = () => {
+ if (addOrEdit.value === "edit") {
+ dialogFormVisible.value = true;
+ return;
+ }
+ form.value = {};
+ dialogFormVisible.value = true;
+};
+
+// 鎻愪氦琛ㄥ崟
+const handleSubmit = () => {
+ // 鎷垮埌鎻愪氦鏁版嵁
+ dialogFormVisible.value = false;
+ getList();
+};
+// 閫夋嫨琛�
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
+// 琛ㄦ牸缂栬緫鏂规硶
+const handleEdit = (row) => {
+ form.value = JSON.parse(JSON.stringify(row));
+ addOrEdit.value = "edit";
+ handleAddEdit()
+};
+const handleDelete = () => {
+ if (selectedRows.value.length === 0) {
+ ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ return;
+ }
+ ElMessageBox.confirm(
+ `纭鍒犻櫎閫変腑鐨� ${selectedRows.value.length} 鏉℃暟鎹悧锛焋,
+ "鎻愮ず",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ }
+ )
+ .then(() => {
+ // 妯℃嫙鍒犻櫎鎿嶄綔
+ tableData.value = tableData.value.filter(
+ (item) => !selectedRows.value.includes(item)
+ );
+ total.value = tableData.value.length;
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ })
+ .catch(() => {
+ ElMessage.info("宸插彇娑堝垹闄�");
+ });
+}
+const handleDeleteSuccess = (row) => {
+ ElMessage.success("鍒犻櫎鎴愬姛锛�" + row.supplierName);
+};
+// 瀵煎嚭
+const handleExport = (row) => {
+ proxy.download("system/post/export", {
+ ...queryParams.value
+ }, `post_${new Date().getTime()}.xlsx`)
+ ElMessage.success("瀵煎嚭鏁版嵁锛�" + row.supplierName);
+};
+// 鎴愬姛
+const handleSuccess = (val) => {
+ console.log(val);
+ tableData.value.push(val);
+ // getList();
+ total.value = tableData.value.length;
+ ElMessage.success("鎿嶄綔鎴愬姛");
+};
+const getList = () => {
+ loading.value = true;
+ setTimeout(() => {
+ tableData.value = [
+ {
+ supplierName: "涓浗鐭虫补鍖栧伐鑲′唤鏈夐檺鍏徃",
+ category: "鐓�",
+ unit: "鍚�",
+ purchaseAmount: "1000",
+ priceBeforeTax: "100",
+ totalBeforeTax: "100000",
+ calorificValue: "5000",
+ registrant: "寮犱笁",
+ registrationDate: "2025-01-01",
+ },
+ {
+ supplierName: "涓浗涓煶鍖�",
+ category: "绮惧搧鐓�",
+ unit: "鍗冨厠",
+ purchaseAmount: "1000",
+ priceBeforeTax: "100",
+ totalBeforeTax: "100000",
+ calorificValue: "5000",
+ registrant: "鏉庡洓",
+ registrationDate: "2025-01-01",
+ }
+ ]
+ total.value = tableData.value.length;
+ loading.value = false;
+ }, 500);
+};
+getList();
+</script>
+
+<style scoped>
+.app-container{
+ box-sizing: border-box;
+}
+.search-form {
+ background-color: #fff;
+ padding: 20px 20px 0 20px;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ box-shadow: var(--el-box-shadow-light);
+}
+.search-form :deep(.el-form-item) {
+ margin-bottom: 16px;
+ width: 100%;
+}
+
+/* 鍝嶅簲寮忓竷灞� */
+@media screen and (min-width: 768px) {
+ .search-form :deep(.el-form-item) {
+ width: 50%;
+ }
+}
+@media screen and (min-width: 1200px) {
+ .search-form :deep(.el-form-item) {
+ width: 18%;
+ }
+}
+.table-toolbar {
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+/* 鍝嶅簲寮忚〃鏍� */
+@media screen and (max-width: 768px) {
+ .table-toolbar {
+ flex-direction: column;
+ }
+ .table-toolbar .el-button {
+ width: 100%;
+ }
+}
+/* 琛ㄦ牸宸ュ叿鏍� */
+.table-toolbar, .table-toolbar > * {
+ margin: 0 0 0 0 !important;
+}
+.table-toolbar{
+ margin-bottom: 20px !important;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3