111

src/components/contract.vue

@@ -12,23 +12,23 @@ import {
 const search = ref('')
 const select = ref('1')
 const dateRange = ref([])
-const filterType = ref('')
 const loading = ref(false)
 const searchResults = ref([])
 const showSearchResults = ref(false)
 const showAddForm = ref(false)
 const isEditMode = ref(false)
 const currentContractId = ref(null)
+const showDetailDialog = ref(false)
+const currentDetail = ref(null)
 
 const form = reactive({
   contract_no: '',
   contract_name: '',
-  type: '',
+  customer_id: '',
-  party_a: '蜜雪冰城股份有限公司',
+  contract_content: '',
-  party_b: '',
+  employee_id: '',
-  sign_date: '',
+  effective_date: '',
-  start_date: '',
+  expiry_date: '',
-  end_date: '',
   amount: 0,
   status: '待审批',
   remark: ''
@@ -49,6 +49,11 @@ const fetchData = async () => {
 
 // 处理搜索
 const handleSearch = async () => {
+  // 如果在表单页面，先关闭表单
+  if (showAddForm.value) {
+    cancelAdd()
+  }
+
   loading.value = true
 
   let keyword = search.value
@@ -59,7 +64,6 @@ const handleSearch = async () => {
   const params = {
     keyword,
     searchField: select.value,
-    type: filterType.value,
     startDate: dateRange.value?.[0],
     endDate: dateRange.value?.[1]
   }
@@ -79,7 +83,6 @@ const handleDateChange = () => {
 const resetSearch = () => {
   search.value = ''
   select.value = '1'
-  filterType.value = ''
   dateRange.value = []
   fetchData()
 }
@@ -98,12 +101,11 @@ const editContract = (row) => {
   Object.assign(form, {
     contract_no: row.contract_no,
     contract_name: row.contract_name,
-    type: row.type,
+    customer_id: row.customer_id,
-    party_a: row.party_a,
+    contract_content: row.contract_content,
-    party_b: row.party_b,
+    employee_id: row.employee_id,
-    sign_date: row.sign_date,
+    effective_date: row.effective_date,
-    start_date: row.start_date,
+    expiry_date: row.expiry_date,
-    end_date: row.end_date,
     amount: row.amount,
     status: row.status,
     remark: row.remark
@@ -148,12 +150,11 @@ const resetForm = () => {
   Object.assign(form, {
     contract_no: '',
     contract_name: '',
-    type: '',
+    customer_id: '',
-    party_a: '蜜雪冰城股份有限公司',
+    contract_content: '',
-    party_b: '',
+    employee_id: '',
-    sign_date: '',
+    effective_date: '',
-    start_date: '',
+    expiry_date: '',
-    end_date: '',
     amount: 0,
     status: '待审批',
     remark: ''
@@ -162,6 +163,18 @@ const resetForm = () => {
   currentContractId.value = null
 }
 
+// 双击查看详情
+const showDetail = (row) => {
+  currentDetail.value = row
+  showDetailDialog.value = true
+}
+
+// 关闭详情弹窗
+const closeDetail = () => {
+  showDetailDialog.value = false
+  currentDetail.value = null
+}
+
 // 状态样式
 const getStatusType = (status) => {
   const map = {
@@ -239,20 +252,13 @@ const formatDate = (date) => {
       <!-- 第二行：筛选条件 -->
       <div class="filter-row">
         <span class="filter-label">筛选条件：</span>
-        <el-select v-model="filterType" placeholder="合同类型" clearable style="width: 150px;" @change="handleSearch">
-          <el-option label="全部类型" value="" />
-          <el-option label="加盟合同" value="加盟合同" />
-          <el-option label="供货合同" value="供货合同" />
-          <el-option label="租赁合同" value="租赁合同" />
-          <el-option label="服务合同" value="服务合同" />
-        </el-select>
 
         <el-date-picker
           v-model="dateRange"
           type="daterange"
           range-separator="至"
-          start-placeholder="开始日期"
+          start-placeholder="生效日期"
-          end-placeholder="结束日期"
+          end-placeholder="到期日期"
           style="margin-left: 10px;"
           @change="handleDateChange"
         />
@@ -274,23 +280,24 @@ const formatDate = (date) => {
           <span class="total-count">共找到 {{ searchResults.length }} 条合同</span>
         </div>
 
-        <el-table :data="searchResults" border style="width: 100%">
+        <el-table :data="searchResults" border style="width: 100%" @row-dblclick="showDetail" row-class-name="clickable-row">
           <el-table-column prop="id" label="ID" width="60" />
           <el-table-column prop="contract_no" label="合同编号" width="130" />
           <el-table-column prop="contract_name" label="合同名称" min-width="180" />
-          <el-table-column prop="type" label="合同类型" width="110" />
+          <el-table-column prop="customer_id" label="客户ID" width="80" />
-          <el-table-column prop="party_b" label="乙方" width="100" />
+          <el-table-column prop="employee_id" label="业务员ID" width="90" />
           <el-table-column prop="amount" label="金额" width="110">
             <template #default="{ row }">
               ¥{{ row.amount?.toLocaleString() }}
             </template>
           </el-table-column>
-          <el-table-column prop="status" label="状态" width="90">
+          <el-table-column prop="status" label="状态" width="80">
             <template #default="{ row }">
               <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="sign_date" label="签订日期" width="110" />
+          <el-table-column prop="effective_date" label="生效日期" width="110" />
+          <el-table-column prop="expiry_date" label="到期日期" width="110" />
           <el-table-column label="操作" width="140" fixed="right">
             <template #default="{ row }">
               <el-button link type="primary" @click="editContract(row)">编辑</el-button>
@@ -312,48 +319,34 @@ const formatDate = (date) => {
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="合同类型">
+            <el-form-item label="合同名称">
-              <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
+              <el-input v-model="form.contract_name" placeholder="请输入合同名称" />
-                <el-option label="加盟合同" value="加盟合同" />
-                <el-option label="供货合同" value="供货合同" />
-                <el-option label="租赁合同" value="租赁合同" />
-                <el-option label="服务合同" value="服务合同" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-form-item label="合同名称">
-          <el-input v-model="form.contract_name" placeholder="请输入合同名称" />
-        </el-form-item>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="甲方">
-              <el-input v-model="form.party_a" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="乙方">
-              <el-input v-model="form.party_b" placeholder="请输入乙方名称" />
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-row :gutter="20">
-          <el-col :span="8">
+          <el-col :span="12">
-            <el-form-item label="签订日期">
+            <el-form-item label="客户ID">
-              <el-date-picker v-model="form.sign_date" type="date" style="width: 100%;" />
+              <el-input v-model="form.customer_id"  style="width: 100%;" />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="12">
+            <el-form-item label="业务员ID">
+              <el-input v-model="form.employee_id"  style="width: 100%;" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
             <el-form-item label="生效日期">
-              <el-date-picker v-model="form.start_date" type="date" style="width: 100%;" />
+              <el-date-picker v-model="form.effective_date" type="date" style="width: 100%;" />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="到期日期">
-              <el-date-picker v-model="form.end_date" type="date" style="width: 100%;" />
+              <el-date-picker v-model="form.expiry_date" type="date" style="width: 100%;" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -376,8 +369,12 @@ const formatDate = (date) => {
           </el-col>
         </el-row>
 
+        <el-form-item label="合同内容/条款">
+          <el-input v-model="form.contract_content" type="textarea" :rows="4" placeholder="请输入合同内容" />
+        </el-form-item>
+
         <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" :rows="3" />
+          <el-input v-model="form.remark" type="textarea" :rows="2" />
         </el-form-item>
 
         <el-form-item>
@@ -386,6 +383,36 @@ const formatDate = (date) => {
         </el-form-item>
       </el-form>
     </div>
+
+    <!-- 合同详情弹窗 -->
+    <el-dialog v-model="showDetailDialog" title="合同详情" width="650px" @close="closeDetail">
+      <div v-if="currentDetail" class="detail-content">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="合同编号">{{ currentDetail.contract_no }}</el-descriptions-item>
+          <el-descriptions-item label="合同名称" :span="2">{{ currentDetail.contract_name }}</el-descriptions-item>
+          <el-descriptions-item label="客户ID">{{ currentDetail.customer_id }}</el-descriptions-item>
+          <el-descriptions-item label="业务员ID">{{ currentDetail.employee_id }}</el-descriptions-item>
+          <el-descriptions-item label="合同金额" :span="2">
+            <span class="amount-text">¥{{ currentDetail.amount?.toLocaleString() }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(currentDetail.status)">{{ currentDetail.status }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="生效日期">{{ currentDetail.effective_date }}</el-descriptions-item>
+          <el-descriptions-item label="到期日期" :span="2">{{ currentDetail.expiry_date }}</el-descriptions-item>
+          <el-descriptions-item label="合同内容" :span="2">
+            <div class="content-text">{{ currentDetail.contract_content || '无' }}</div>
+          </el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">
+            {{ currentDetail.remark || '无' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <template #footer>
+        <el-button @click="closeDetail">关闭</el-button>
+        <el-button type="primary" @click="closeDetail(); editContract(currentDetail)">编辑</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -441,4 +468,25 @@ const formatDate = (date) => {
 .loading-container, .empty-container {
   padding: 40px 0;
 }
+
+.clickable-row {
+  cursor: pointer;
+}
+
+.detail-content {
+  padding: 10px 0;
+}
+
+.amount-text {
+  font-weight: 600;
+  color: #e6a23c;
+  font-size: 16px;
+}
+
+.content-text {
+  white-space: pre-wrap;
+  line-height: 1.6;
+  max-height: 120px;
+  overflow-y: auto;
+}
 </style>

src/components/customer.vue

@@ -165,7 +165,7 @@ const clearSearch = () => {
                 重置
             </el-button>
             <el-button color="#E60012" @click="addCustomer" style="margin-left: 20px">
-                新增用户
+                新增客户
             </el-button>
 
         </div>
@@ -176,7 +176,7 @@ const clearSearch = () => {
             </div>
 
             <div v-else-if="searchResults.length === 0" class="empty-container">
-                <el-empty description="暂无客户数据" />
+                <el-empty description="暂无数据" />
             </div>
 
 
@@ -192,10 +192,11 @@ const clearSearch = () => {
                     </el-table-column>
                     <el-table-column prop="address" label="详细地址" width="200" />
                     <el-table-column prop="email" label="电子邮箱" width="200" />
+                    <el-table-column prop="remark" label="备注" width=""200 />
                     <el-table-column prop="customer_type" label="代理商类型" width="120">
                         <template #default="{ row }">
                             <el-tag :type="row.customer_type === 'VIP' ? 'danger' : 'info'">
-                                {{ row.customer_type === 'VIP' ? '地区总代理' : '普通代理' }}
+                                {{ row.customer_type === 'VIP' ? '地区总代理' : '加盟商' }}
                             </el-tag>
                         </template>
                     </el-table-column>
@@ -244,7 +245,7 @@ const clearSearch = () => {
                 <el-form-item label="代理商类型">
                     <el-radio-group v-model="form.customer_type">
                         <el-radio value="VIP">地区总代理</el-radio>
-                        <el-radio value="Normal">普通代理</el-radio>
+                        <el-radio value="Normal">加盟商</el-radio>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item>

src/components/employee.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
+</style>

src/components/panel.vue

@@ -63,16 +63,21 @@ const switchFold = () => {
             <template #title>售后管理</template>
           </el-menu-item>
 
-          <el-menu-item index="/panel/page3">
+          <el-menu-item index="/panel/products">
             <el-icon><IceTea /></el-icon>
             <template #title>产品管理</template>
           </el-menu-item>
 
-          <el-menu-item index="/panel/page3">
+          <el-menu-item index="/panel/employee">
             <el-icon><User /></el-icon>
             <template #title>员工管理</template>
           </el-menu-item>
 
+            <el-menu-item index="/panel/user">
+            <el-icon><User /></el-icon>
+            <template #title>用户管理</template>
+          </el-menu-item>
+
           <!-- 底部收缩按钮 -->
           <el-menu-item index="" class="collapse-btn" @click="switchFold">
             <el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}">
@@ -112,6 +117,15 @@ const switchFold = () => {
   display: flex;
   align-items: center;
   gap: 10px;
+  border-bottom: none !important;
+}
+
+.logo-item.is-active {
+  border-bottom: none !important;
+}
+
+.logo-item.is-active::after {
+  display: none !important;
 }
 
 .logo-img {

src/components/products.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
+</style>

src/components/user.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
+</style>

src/router.js

@@ -5,6 +5,9 @@ import Panel from "./components/panel.vue";
 import Customer from "./components/customer.vue";
 import Contract from "./components/contract.vue";
 import Service from "./components/service.vue";
+import Products from "./components/products.vue";
+import Employee from "./components/employee.vue";
+import User from "./components/user.vue";
 
 const routes = [
     { path: "/", redirect: "/login" },
@@ -18,6 +21,9 @@ const routes = [
             { path: "customer", component: Customer },
             { path: "contract", component: Contract },
             { path: "service", component: Service },
+            { path: "products", component: Products  },
+            { path: "employee", component: Employee },
+            { path: "user", component: User }
         ],
     },
 ]