From 8b12cced775a4a296886a81e729b914366dbbffb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=BB=BA=E9=9B=84?= <jsonwu@qq.com>
Date: Sun, 7 Apr 2024 15:09:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=AE=BE=E7=BD=AEts=E8=B7=AF=E5=BE=84?=
 =?UTF-8?q?=E5=88=AB=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tsconfig.json | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index 9e03e60..1c1fd1b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,17 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    // 路径别名
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@common/*": [
+        "./common-vue3/*"
+      ]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
-- 
Gitee


From b57a48fd8f950e0923e3ba6dfd52183c6cb35591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=BB=BA=E9=9B=84?= <jsonwu@qq.com>
Date: Tue, 9 Apr 2024 08:50:31 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BE=9B=E5=BA=94=E5=95=86=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common-vue3                                   |   2 +-
 src/components.d.ts                           |   5 +
 src/views/registration/index.vue              |   1 +
 src/views/supplier/component/updateDialog.vue | 185 +++++++++++++++
 src/views/supplier/index.vue                  | 170 ++++++++++++++
 src/views/supplier/mockData.ts                | 220 ++++++++++++++++++
 src/views/supplier/types.ts                   |  39 ++++
 7 files changed, 621 insertions(+), 1 deletion(-)
 create mode 100644 src/views/supplier/component/updateDialog.vue
 create mode 100644 src/views/supplier/index.vue
 create mode 100644 src/views/supplier/mockData.ts
 create mode 100644 src/views/supplier/types.ts

diff --git a/common-vue3 b/common-vue3
index c9a3fa4..80df44c 160000
--- a/common-vue3
+++ b/common-vue3
@@ -1 +1 @@
-Subproject commit c9a3fa424429ba824b86a9ddf4a94e10d79529a0
+Subproject commit 80df44c74f019217741217a12f9955faf08da497
diff --git a/src/components.d.ts b/src/components.d.ts
index b752764..65c66d0 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,7 +10,11 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElImput: typeof import('element-plus/es')['ElImput']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
@@ -26,6 +30,7 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
+    ElTree: typeof import('element-plus/es')['ElTree']
     Footer: typeof import('./components/footer.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/views/registration/index.vue b/src/views/registration/index.vue
index 69d599e..52706e1 100644
--- a/src/views/registration/index.vue
+++ b/src/views/registration/index.vue
@@ -16,6 +16,7 @@ function go() {
 
 <template>
     <div @click="go">挂号页面</div>
+    <div @click="router.push('/supplier')">供应商管理</div>
     <div class="text">scss样式</div>
     <div>farmeWork数据 {{ isLogin }}</div>
     <div>
diff --git a/src/views/supplier/component/updateDialog.vue b/src/views/supplier/component/updateDialog.vue
new file mode 100644
index 0000000..f5872da
--- /dev/null
+++ b/src/views/supplier/component/updateDialog.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+defineOptions({
+  // 命名当前组件
+  name: "UpdateDialog"
+})
+
+import { reactive } from 'vue'
+
+const  dialogVisible = defineModel({ default: false })
+
+const formData = reactive({
+  username: '2323',
+  password: '222',
+  id: '11',
+  type: [],
+});
+
+const emit = defineEmits(['confirm', 'close']);
+
+const confirm = () => {
+  emit('confirm');
+  dialogVisible.value = false;
+}
+
+const close = () => {
+  emit('close');
+  dialogVisible.value = false;
+}
+
+
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" title="供应商编辑【新增】" width="800">
+
+    <div class="wrap">
+      <el-tabs type="border-card">
+        <el-tab-pane label="常规信息">
+          <el-form style="max-width: 400px;margin: 0 auto" ref="formRef" :model="formData" label-width="60px" label-position="right">
+            <el-form-item prop="username" label="上级">
+              <el-input v-model="formData.username" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item prop="password" label="编码">
+              <div class="flex">
+                <span style="margin-right: 15px;">30858</span>
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </div>
+            </el-form-item>
+            <el-form-item prop="name" label="名称">
+              <el-input v-model="formData.password" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item prop="password" label="简码">
+              <el-input v-model="formData.password" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox-group v-model="formData.type">
+                <el-checkbox value="Online activities" name="type">
+                  药品
+                </el-checkbox>
+                <el-checkbox value="Promotion activities" name="type">
+                  其他
+                </el-checkbox>
+                <el-checkbox value="Offline activities" name="type">
+                  设备
+                </el-checkbox>
+                <el-checkbox value="Simple brand exposure" name="type">
+                  物资
+                </el-checkbox>
+                <el-checkbox value="Simple brand exposure" name="type">
+                  卫生材料
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="附加信息">
+          <el-form ref="formRef" style="max-width: 80%;margin: 0 auto" :model="formData" label-width="100px" label-position="right">
+            <div class="flex j-s-b" style="width: 100%">
+              <el-form-item prop="username" label="账号">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="password" label="税务登记号">
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </el-form-item>
+            </div>
+
+            <div class="flex j-s-b" style="width: 100%">
+              <el-form-item prop="username" label="联系人">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="password" label="电话">
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </el-form-item>
+            </div>
+
+            <div class="flex j-s-b" style="width: 100%">
+              <el-form-item prop="username" label="许可证号">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="password" label="许可证效期">
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </el-form-item>
+            </div>
+
+            <div class="flex j-s-b" style="width: 100%">
+              <el-form-item prop="username" label="执照号">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="password" label="执照效期">
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </el-form-item>
+            </div>
+
+            <div class="flex j-s-b" style="width: 100%">
+              <el-form-item prop="username" label="授权号">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="password" label="授权期">
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </el-form-item>
+            </div>
+
+            <div class="flex j-s-b" style="width: 100%">
+              <el-form-item prop="username" label="信用期">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="password" label="信用额">
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </el-form-item>
+            </div>
+
+            <el-form-item prop="password" label="开户银行">
+              <el-input v-model="formData.password" placeholder="请输入" />
+            </el-form-item>
+
+            <el-form-item prop="password" label="地址">
+              <el-input v-model="formData.password" placeholder="请输入" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="其他辅助信息">
+          <el-form ref="formRef" :model="formData" label-width="70px" label-position="right">
+            <div>销售人员委托书信息</div>
+            <div class="flex">
+              <el-form-item prop="username" label="姓名">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="username" label="日期">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+            </div>
+            <div>质量认证信息</div>
+            <div class="flex">
+              <el-form-item prop="password" label="证号">
+                <el-input v-model="formData.password" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item prop="username" label="日期">
+                <el-input v-model="formData.username" placeholder="请输入" />
+              </el-form-item>
+            </div>
+            <el-form-item prop="username" label="首营品种">
+              <el-input v-model="formData.username" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item prop="username" label="备注">
+              <el-input v-model="formData.username" placeholder="请输入" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="confirm">
+          确定
+        </el-button>
+        <el-button @click="close">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/supplier/index.vue b/src/views/supplier/index.vue
new file mode 100644
index 0000000..7bd2a4b
--- /dev/null
+++ b/src/views/supplier/index.vue
@@ -0,0 +1,170 @@
+<template>
+    <div class="supplier">
+      <div class="btn-list">
+        <el-button disabled @click="btnClick(BtnText.PRINT)">打印</el-button>
+        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.ADD_CLASSIFY)">增加分类</el-button>
+        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.UPDATE_CLASSIFY)">修改分类</el-button>
+        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.DEL_CLASSIFY)" type="danger">删除分类</el-button>
+        <el-button :disabled="isDisabled" @click="btnClick(BtnText.ADD)">增加</el-button>
+        <el-button :disabled="isDisabled" @click="btnClick(BtnText.UPDATE)">修改</el-button>
+        <el-button :disabled="isDisabled" @click="btnClick(BtnText.DELETE)" type="danger">删除</el-button>
+        <el-button :disabled="isDisabled" @click="btnClick(BtnText.START)">启用</el-button>
+        <el-button :disabled="isDisabled" @click="btnClick(BtnText.STOP)" type="danger">停用</el-button>
+      </div>
+
+      <div class="wrap">
+        <div class="tree">
+          <el-tree
+              style="max-width: 600px"
+              default-expand-all
+              :data="treeData"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+          />
+        </div>
+
+        <div class="table">
+          <div class="table-wrap">
+            <el-table
+                ref="tableRef"
+                highlight-current-row
+                @current-change="handleCurrentChange"
+                :data="tableData" style="width: 100%">
+              <el-table-column v-for="column in tableColumnList" :prop="column.prop" :label="column.label"/>
+            </el-table>
+          </div>
+        </div>
+      </div>
+
+      <update-dialog v-model="dialogVisible"></update-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { supplierList, tableColumnList, treeData} from "./mockData.ts";
+import {BtnText, SupplierTableData} from './types.ts'
+import { ElTable, ElMessageBox } from 'element-plus'
+import updateDialog from "./component/updateDialog.vue";
+
+defineOptions({
+  // 命名当前组件
+  name: "Supplier"
+})
+
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+
+interface Tree {
+  label: string,
+  children?: Tree[],
+}
+
+// 当前选择的树节点
+const currentNode = ref({});
+// 左侧树操作按钮禁用状态
+const isNodeDisabled = computed(() => {
+  return !currentNode.value.label
+})
+const handleNodeClick = (data: Tree) => {
+  console.log(data)
+  currentNode.value = data
+}
+
+const dialogVisible = ref(false);
+
+// 按钮操作事件
+const btnClick = (btnName: BtnText) => {
+  console.log(`当前点击事件：${BtnText[btnName]}`)
+  switch (btnName) {
+    case BtnText.PRINT:
+      break
+    case BtnText.ADD_CLASSIFY:
+      break
+    case BtnText.UPDATE_CLASSIFY:
+      break
+    case BtnText.DEL_CLASSIFY:
+      break
+    case BtnText.ADD:
+      dialogVisible.value = true;
+      break
+    case BtnText.UPDATE:
+      dialogVisible.value = true;
+      break
+    case BtnText.DELETE:
+      delRow();
+      break
+    case BtnText.START:
+      break
+    case BtnText.STOP:
+      break
+    default:
+      break
+  }
+}
+
+const tableData = ref(supplierList)
+
+// 当前选择的行数据
+const currentRow = ref()
+// 表格的ref对象
+const tableRef = ref<InstanceType<typeof ElTable>>()
+// 表格操作按钮禁用状态
+const isDisabled = computed(() => {
+  return !currentRow.value
+})
+
+const handleCurrentChange = (row: SupplierTableData | undefined) => {
+  currentRow.value = row
+  tableRef.value!.setCurrentRow(row)
+  console.log(`当前选择的行:`, row)
+}
+
+// 删除选中行
+const delRow = (done: () => void) => {
+    ElMessageBox.confirm('确认要删除该供应商吗?', '警告', {
+      cancelButtonText: '取消',
+      confirmButtonText: '确认',
+      type: 'warning',
+    })
+      .then(() => {
+
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.supplier {
+ padding: 10px;
+  .btn-list {
+    padding: 0 10px 10px;
+    button {
+      cursor: pointer;
+    }
+  }
+
+  .wrap {
+    display: flex;
+    justify-content: space-between;
+    .tree {
+      padding: 5px;
+      width: 300px;
+      border: 1px solid silver;
+    }
+
+    .table {
+      width: calc(100% - 300px);
+      border: 1px solid silver;
+    }
+
+  }
+
+}
+</style>
diff --git a/src/views/supplier/mockData.ts b/src/views/supplier/mockData.ts
new file mode 100644
index 0000000..2453e0a
--- /dev/null
+++ b/src/views/supplier/mockData.ts
@@ -0,0 +1,220 @@
+import {SupplierTableData, TableColumn} from './types.ts'
+// 左侧树数据
+export const treeData = [
+    {
+        label: '所有供应商',
+        children: [
+            {
+                label: '[308]设备供应商',
+                children: [
+                    {
+                        "label": "[30801]汤坑镇广顺评价商场"
+                    },
+                    {
+                        "label": "[30802]张家口大华超市"
+                    },
+                    {
+                        "label": "[30803]北京王府井百货"
+                    },
+                    {
+                        "label": "[30804]上海新世界百货"
+                    },
+                    {
+                        "label": "[30805]广州天河城购物中心"
+                    },
+                    {
+                        "label": "[30806]深圳华润万家"
+                    },
+                    {
+                        "label": "[30807]成都太古里购物中心"
+                    },
+                    {
+                        "label": "[30808]",
+                        children: [
+                            {
+                                "label": "[3080801]成都太古里购物中心"
+                            },
+                            {
+                                "label": "[3080802]北京王府井百货"
+                            },
+                            {
+                                "label": "[3080803]上海新世界百货"
+                            },
+                            {
+                                "label": "[3080804]广州天河城购物中心"
+                            },
+                        ]
+                    },
+                    {
+                        "label": "[30809]杭州西湖银泰in77"
+                    },
+                    {
+                        "label": "[30810]武汉光谷步行街"
+                    }
+                ]
+                ,
+            },
+        ],
+    },
+]
+
+// 表格数据
+export const supplierList: SupplierTableData[] = [
+    {
+        "name": "产品A",
+        "code": "001",
+        "shortCode": "PA",
+        "type": "电子产品",
+        "licenseNumber": "许可证123",
+        "licenseExpiryDate": "2025年12月31日",
+        "address": "123号主街",
+        "phone": "+1234567890",
+        "taxRegistrationNumber": "税务登记号123",
+        "bankName": "美国银行",
+        "accountNumber": "987654321",
+        "contactPerson": "张三",
+        "creditLimit": "5000",
+        "creationDate": "2024年04月07日",
+        "usageStatus": "活跃"
+    },
+    {
+        "name": "产品B",
+        "code": "002",
+        "shortCode": "PB",
+        "type": "服装",
+        "licenseNumber": "许可证456",
+        "licenseExpiryDate": "2025年11月30日",
+        "address": "456号商业街",
+        "phone": "+0987654321",
+        "taxRegistrationNumber": "税务登记号456",
+        "bankName": "中国银行",
+        "accountNumber": "123456789",
+        "contactPerson": "李四",
+        "creditLimit": "6000",
+        "creationDate": "2024年04月08日",
+        "usageStatus": "停用"
+    },
+    {
+        "name": "产品C",
+        "code": "003",
+        "shortCode": "PC",
+        "type": "食品",
+        "licenseNumber": "许可证789",
+        "licenseExpiryDate": "2025年10月29日",
+        "address": "789号广场",
+        "phone": "+1357924680",
+        "taxRegistrationNumber": "税务登记号789",
+        "bankName": "工商银行",
+        "accountNumber": "987654123",
+        "contactPerson": "王五",
+        "creditLimit": "7000",
+        "creationDate": "2024年04月09日",
+        "usageStatus": "活跃"
+    },
+    {
+        "name": "产品D",
+        "code": "004",
+        "shortCode": "PD",
+        "type": "家具",
+        "licenseNumber": "许可证234",
+        "licenseExpiryDate": "2025年09月28日",
+        "address": "234号街道",
+        "phone": "+2468135790",
+        "taxRegistrationNumber": "税务登记号234",
+        "bankName": "建设银行",
+        "accountNumber": "456789123",
+        "contactPerson": "赵六",
+        "creditLimit": "8000",
+        "creationDate": "2024年04月10日",
+        "usageStatus": "停用"
+    },
+    {
+        "name": "产品E",
+        "code": "005",
+        "shortCode": "PE",
+        "type": "化妆品",
+        "licenseNumber": "许可证567",
+        "licenseExpiryDate": "2025年08月27日",
+        "address": "567号大道",
+        "phone": "+3698521470",
+        "taxRegistrationNumber": "税务登记号567",
+        "bankName": "交通银行",
+        "accountNumber": "321654987",
+        "contactPerson": "钱七",
+        "creditLimit": "9000",
+        "creationDate": "2024年04月11日",
+        "usageStatus": "活跃"
+    }
+]
+
+// 表格列参数
+export const tableColumnList: TableColumn[] = [
+    {
+        "prop": "name",
+        "label": "名称"
+    },
+    {
+        "prop": "code",
+        "label": "编码"
+    },
+    {
+        "prop": "shortCode",
+        "label": "简码"
+    },
+    {
+        "prop": "type",
+        "label": "类型"
+    },
+    {
+        "prop": "licenseNumber",
+        "label": "许可证号"
+    },
+    {
+        "prop": "licenseExpiryDate",
+        "label": "许可证有效期"
+    },
+    {
+        "prop": "licenseNumber",
+        "label": "执照号"
+    },
+    {
+        "prop": "licenseExpiryDate",
+        "label": "执照效期"
+    },
+    {
+        "prop": "address",
+        "label": "地址"
+    },
+    {
+        "prop": "phone",
+        "label": "电话"
+    },
+    {
+        "prop": "taxRegistrationNumber",
+        "label": "税务登记号"
+    },
+    {
+        "prop": "bankName",
+        "label": "开户银行"
+    },
+    {
+        "prop": "accountNumber",
+        "label": "账号"
+    },
+    {
+        "prop": "contactPerson",
+        "label": "联系人"
+    },
+    {
+        "prop": "creditLimit",
+        "label": "信用额"
+    },
+    {
+        "prop": "creationDate",
+        "label": "建档日期"
+    },
+    {
+        "prop": "usageStatus",
+        "label": "是否停用"
+    }
+]
diff --git a/src/views/supplier/types.ts b/src/views/supplier/types.ts
new file mode 100644
index 0000000..5800fc2
--- /dev/null
+++ b/src/views/supplier/types.ts
@@ -0,0 +1,39 @@
+
+
+export interface SupplierTableData {
+    name: string;
+    code: string;
+    shortCode: string;
+    type: string;
+    licenseNumber: string;
+    licenseExpiryDate: string;
+    address: string;
+    phone: string;
+    taxRegistrationNumber: string;
+    bankName: string;
+    accountNumber: string;
+    contactPerson: string;
+    creditLimit: string;
+    creationDate: string;
+    usageStatus: string;
+}
+export interface UpdateForm extends SupplierTableData {
+    higherLevel: string
+}
+
+export interface TableColumn {
+    prop: string;
+    label: string;
+}
+
+export enum BtnText {
+    PRINT, // 打印
+    ADD_CLASSIFY, // 增加分类
+    UPDATE_CLASSIFY, // 修改分类
+    DEL_CLASSIFY, // 删除分类
+    ADD, // 增加
+    UPDATE, // 修改
+    DELETE, // 删除
+    START, // 启用
+    STOP, // 停用
+}
-- 
Gitee