部分样式调整

src/view/key-person/key_dm_conf/index.vue

@@ -5,14 +5,14 @@
       <TabPane label="人员分类管理" name="userCategory">
         <div class="search-div">
           <Row type="flex" :gutter="16">
-            <Col span="6">
+            <Col span="12">
               <span>分类名称：</span>
-              <Input v-model="filters.userCategory.catgory_name" placeholder="请输入" style="width: 70%" />
+              <Input v-model="filters.userCategory.catgory_name" placeholder="请输入" style="width: 30%" />
             </Col>
             <Col span="12" class="text-right">
               <Button type="primary" class="mr10" @click="handleSearch('userCategory')">搜索</Button>
-              <Button class="mr10" @click="handleReset('userCategory')">重置</Button>
-              <Button type="success" @click="openAddModal('userCategory')">新增</Button>
+              <Button type="primary" class="mr10" @click="handleReset('userCategory')">重置</Button>
+              <Button type="primary" @click="openAddModal('userCategory')">新增</Button>
             </Col>
           </Row>
         </div>
@@ -51,8 +51,8 @@
             </Col>
             <Col span="12" class="text-right">
               <Button type="primary" class="mr10" @click="handleSearch('leaveType')">搜索</Button>
-              <Button class="mr10" @click="handleReset('leaveType')">重置</Button>
-              <Button type="success" @click="openAddModal('leaveType')">新增</Button>
+              <Button type="primary" class="mr10" @click="handleReset('leaveType')">重置</Button>
+              <Button type="primary" @click="openAddModal('leaveType')">新增</Button>
             </Col>
           </Row>
         </div>
@@ -82,16 +82,16 @@
           <Row type="flex" :gutter="16">
             <Col span="6">
               <span>分类名称：</span>
-              <Input v-model="filters.materialCategory.category_Name" placeholder="请输入" style="width: 70%" />
+              <Input v-model="filters.materialCategory.category_name" placeholder="请输入" style="width: 70%" />
             </Col>
             <Col span="6">
               <span>分类编码：</span>
-              <Input v-model="filters.materialCategory.category_Code" placeholder="请输入" style="width: 70%" />
+              <Input v-model="filters.materialCategory.category_code" placeholder="请输入" style="width: 70%" />
             </Col>
             <Col span="12" class="text-right">
               <Button type="primary" class="mr10" @click="handleSearch('materialCategory')">搜索</Button>
-              <Button class="mr10" @click="handleReset('materialCategory')">重置</Button>
-              <Button type="success" @click="openAddModal('materialCategory')">新增</Button>
+              <Button type="primary" class="mr10" @click="handleReset('materialCategory')">重置</Button>
+              <Button type="primary" @click="openAddModal('materialCategory')">新增</Button>
             </Col>
           </Row>
         </div>
@@ -130,13 +130,13 @@
             <Col span="6">
               <span>分类：</span>
               <Select v-model="filters.material.category_id" clearable style="width: 70%">
-                <Option v-for="cat in materialCategoryOptions" :key="cat.id" :value="cat.id">{{ cat.category_Name }}</Option>
+                <Option v-for="cat in materialCategoryOptions" :key="cat.id" :value="cat.id">{{ cat.category_name }}</Option>
               </Select>
             </Col>
             <Col span="6" class="text-right">
               <Button type="primary" class="mr10" @click="handleSearch('material')">搜索</Button>
-              <Button class="mr10" @click="handleReset('material')">重置</Button>
-              <Button type="success" @click="openAddModal('material')">新增</Button>
+              <Button type="primary" class="mr10" @click="handleReset('material')">重置</Button>
+              <Button type="primary" class="mr10" @click="openAddModal('material')">新增</Button>
               <Button type="primary" class="mr10" v-if="showImport()" @click="importShow = true">导入</Button>
             </Col>
           </Row>
@@ -186,6 +186,7 @@
         <Col span="10">
           <div style="text-align: center;">
             <Upload
+               action="#",
               :show-upload-list="false"
               :before-upload="handleBeforeUpload"
               :format="['xls','xlsx']"
@@ -261,11 +262,11 @@
     <!-- 办公用品分类管理弹窗 -->
     <Modal v-model="modals.materialCategory.visible" :title="modals.materialCategory.isEdit ? '修改办公用品分类' : '新增办公用品分类'" width="600" :mask-closable="false">
       <Form :label-width="120" :model="modals.materialCategory.form" :rules="modals.materialCategory.rules" ref="materialCategoryForm">
-        <FormItem label="分类编码" prop="category_Code">
-          <Input v-model="modals.materialCategory.form.category_Code" placeholder="请输入分类编码" />
+        <FormItem label="分类编码" prop="category_code">
+          <Input v-model="modals.materialCategory.form.category_code" placeholder="请输入分类编码" />
         </FormItem>
-        <FormItem label="分类名称" prop="category_Name">
-          <Input v-model="modals.materialCategory.form.category_Name" placeholder="请输入分类名称" />
+        <FormItem label="分类名称" prop="category_name">
+          <Input v-model="modals.materialCategory.form.category_name" placeholder="请输入分类名称" />
         </FormItem>
         <FormItem label="分类描述" prop="remark">
           <Input type="textarea" :rows="3" v-model="modals.materialCategory.form.remark" placeholder="请输入分类描述" />
@@ -287,7 +288,7 @@
           <Col span="12">
             <FormItem label="分类" prop="category_id">
               <Select v-model="modals.material.form.category_id" placeholder="请选择分类" style="width: 100%">
-                <Option v-for="cat in materialCategoryOptions" :key="cat.id" :value="cat.id">{{ cat.category_Name }}</Option>
+                <Option v-for="cat in materialCategoryOptions" :key="cat.id" :value="cat.id">{{ cat.category_name }}</Option>
               </Select>
             </FormItem>
           </Col>
@@ -423,7 +424,7 @@ export default {
       filters: {
         userCategory: { catgory_name: '' },
         leaveType: { type_name: '', type_code: '' },
-        materialCategory: { category_Name: '', category_Code: '' },
+        materialCategory: { category_name: '', category_code: '' },
         material: { material_name: '', material_code: '', category_id: '' }
       },
       tables: {
@@ -484,14 +485,14 @@ export default {
           saving: false,
           form: {
             id: '',
-            category_Code: '',
-            category_Name: '',
+            category_code: '',
+            category_name: '',
             remark: '',
             order_no: 0
           },
           rules: {
-            category_Code: [{ required: true, message: '请输入分类编码', trigger: 'blur' }],
-            category_Name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
+            category_code: [{ required: true, message: '请输入分类编码', trigger: 'blur' }],
+            category_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
           }
         },
         material: {
@@ -550,8 +551,8 @@ export default {
       ],
       materialCategoryColumns: [
         { type: 'index', title: '序号', width: 60, align: 'center' },
-        { title: '分类编码', key: 'category_Code', align: 'center' },
-        { title: '分类名称', key: 'category_Name', align: 'center' },
+        { title: '分类编码', key: 'category_code', align: 'center' },
+        { title: '分类名称', key: 'category_name', align: 'center' },
         { title: '分类描述', key: 'remark', align: 'center' },
         { title: '排序号', key: 'order_no', align: 'center', width: 100 },
         { title: '操作', slot: 'action', align: 'center', width: 180, fixed: 'right' }
@@ -636,7 +637,7 @@ export default {
       const resetMap = {
         userCategory: () => ({ catgory_name: '' }),
         leaveType: () => ({ type_name: '', type_code: '' }),
-        materialCategory: () => ({ category_Name: '', category_Code: '' }),
+        materialCategory: () => ({ category_name: '', category_code: '' }),
         material: () => ({ material_name: '', material_code: '', category_id: '' })
       }
       this.filters[tab] = resetMap[tab]()
@@ -688,8 +689,8 @@ export default {
         },
         materialCategory: {
           id: '',
-          category_Code: '',
-          category_Name: '',
+          category_code: '',
+          category_name: '',
           remark: '',
           order_no: 0
         },
@@ -816,8 +817,8 @@ export default {
           const raw = data.results || []
           // 规范化后端字段名，确保 id 字段为小写 id，以便 Select v-model 绑定正常工作
           this.materialCategoryOptions = Array.isArray(raw) ? raw.map(it => ({
-            id: (it.Id || it.id || it.category_Code || '').toString(),
-            category_Name: (it.category_Name || it.categoryName || it.category_Code || '')
+            id: (it.Id || it.id || it.category_code || '').toString(),
+            category_name: (it.category_name || it.categoryName || it.category_code || '')
           })) : []
         }
       })
@@ -899,6 +900,7 @@ export default {
 <style scoped>
 .key-dm-wrapper {
   padding: 10px;
+  min-height: 80vh;
 }
 .search-div {
   border: 1px solid #dce1e7;

src/view/key-person/key_dm_conf/materialSelector.vue

@@ -55,8 +55,7 @@ export default {
       pager: { pageNo: 1, pageSize: 10, totalRecord: 0 },
       selectedRows: [],
       confirming: false,
-      categoryOptions: []
-      ,
+      categoryOptions: [],
       columns: [
         { type: 'selection', width: 60 },
         { title: '物料编码', key: 'material_code', align: 'center' },
@@ -148,5 +147,3 @@ export default {
 .mr10 { margin-right: 10px; }
 .page_style { margin-top: 12px; text-align: right; }
 </style>
-
-

src/view/key-person/key_dm_inventory/stats.vue

 <template>
   <div class="key-dm-stats-wrapper">
-    <Tabs v-model="activeTab" @on-click="handleTabChange">
+    <Tabs v-model="activeTab" @on-click="handleTabChange" class="tabsCls">
       <TabPane label="办公用品使用统计" name="usage">
         <div class="search-div">
           <Row type="flex" :gutter="16" align="middle">
-            <Col :span="8">
-              <span>时间段：</span>
-              <DatePicker v-model="usageRange" type="daterange" style="width:70%" />
-            </Col>
-            <Col :span="8">
+            <Col :span="20">
+              <span>开始：</span>
+              <DatePicker v-model="usageStart" type="date" style="min-width:110px;margin-right:20px" />
+              <span>结束：</span>
+              <DatePicker v-model="usageEnd" type="date" style="min-width:110px;margin-right:20px" />
               <span>物料：</span>
-              <Input v-model="usageMaterial" placeholder="物料名称或编码" style="width:70%" />
+              <Input v-model="usageMaterial" placeholder="物料名称或编码" style="width: 150px" />
             </Col>
-            <Col :span="8" class="text-right">
+            <Col :span="4" class="text-right">
               <Button type="primary" class="mr10" @click="loadUsage">统计</Button>
               <Button @click="resetUsage">重置</Button>
             </Col>
@@ -28,9 +28,11 @@
       <TabPane label="工作量统计" name="workload">
         <div class="search-div">
           <Row type="flex" :gutter="16" align="middle">
-            <Col :span="10">
-              <span>时间段：</span>
-              <DatePicker v-model="workRange" type="daterange" style="width:70%" />
+            <Col :span="18">
+              <span>开始：</span>
+              <DatePicker v-model="workStart" type="date" style="min-width:110px;margin-right:20px" />
+              <span>结束：</span>
+              <DatePicker v-model="workEnd" type="date" style="min-width:110px;margin-right:20px" />
             </Col>
             <Col :span="6" class="text-right">
               <Button type="primary" class="mr10" @click="loadWorkload">统计</Button>
@@ -65,9 +67,11 @@ export default {
   data () {
     return {
       activeTab: 'usage',
-      usageRange: [],
+      usageStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+      usageEnd: new Date(),
       usageMaterial: '',
-      workRange: [],
+      workStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+      workEnd: new Date(),
       tables: { usage: [], workload: [] },
       loading: { usage: false, workload: false },
       usageColumns: [
@@ -96,39 +100,39 @@ export default {
     },
     loadUsage () {
       this.loading.usage = true
-      const params = { start: this.usageRange[0], end: this.usageRange[1], material: this.usageMaterial }
+      const params = { start: this.usageStart, end: this.usageEnd, material: this.usageMaterial }
       getUsageStats({ params }).then(ret => {
         if (ret.data && ret.data.errcode === 0) this.tables.usage = ret.data.data || []
         else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
       }).finally(() => { this.loading.usage = false })
     },
-    resetUsage () { this.usageRange = []; this.usageMaterial = ''; this.tables.usage = [] },
+    resetUsage () { this.usageStart = null; this.usageEnd = null; this.usageMaterial = ''; this.tables.usage = [] },
     openUsageDetail (row) {
       this.detailModal.columns = [{ key: 'user_name', title: '人员' }, { key: 'quantity', title: '数量' }, { key: 'material_name', title: '物料' }, { key: 'department_name', title: '部门' }]
       this.detailModal.visible = true
-      getUsageDetails({ params: { start: this.usageRange[0], end: this.usageRange[1], material: this.usageMaterial, department: row.department_id } }).then(ret => {
+      getUsageDetails({ params: { start: this.usageStart, end: this.usageEnd, material: this.usageMaterial, department: row.department_id } }).then(ret => {
         if (ret.data && ret.data.errcode === 0) this.detailModal.rows = ret.data.data || []
         else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
       })
     },
     loadWorkload () {
       this.loading.workload = true
-      const params = { start: this.workRange[0], end: this.workRange[1] }
+      const params = { start: this.workStart, end: this.workEnd }
       getWorkloadStats({ params }).then(ret => {
         if (ret.data && ret.data.errcode === 0) this.tables.workload = ret.data.data || []
         else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
       }).finally(() => { this.loading.workload = false })
     },
-    resetWorkload () { this.workRange = []; this.tables.workload = [] },
+    resetWorkload () { this.workStart = null; this.workEnd = null; this.tables.workload = [] },
     openWorkloadDetail (row, type) {
       if (type === 'leave') {
         this.detailModal.columns = [{ key: 'user_name', title: '人员' }, { key: 'start_time', title: '开始' }, { key: 'end_time', title: '结束' }, { key: 'duration', title: '时长' }]
-        getWorkloadDetails({ params: { user_id: row.user_id, start: this.workRange[0], end: this.workRange[1], type: 'leave' } }).then(ret => {
+        getWorkloadDetails({ params: { user_id: row.user_id, start: this.workStart, end: this.workEnd, type: 'leave' } }).then(ret => {
           if (ret.data && ret.data.errcode === 0) { this.detailModal.rows = ret.data.data || []; this.detailModal.visible = true } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
         })
       } else {
         this.detailModal.columns = [{ key: 'application_no', title: '申请单号' }, { key: 'material_name', title: '物料' }, { key: 'apply_quantity', title: '数量' }]
-        getWorkloadDetails({ params: { user_id: row.user_id, start: this.workRange[0], end: this.workRange[1], type: 'inventory' } }).then(ret => {
+        getWorkloadDetails({ params: { user_id: row.user_id, start: this.workStart, end: this.workEnd, type: 'inventory' } }).then(ret => {
           if (ret.data && ret.data.errcode === 0) { this.detailModal.rows = ret.data.data || []; this.detailModal.visible = true } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
         })
       }
@@ -138,7 +142,8 @@ export default {
 </script>
 
 <style scoped>
-.key-dm-stats-wrapper { padding: 10px; }
+.key-dm-stats-wrapper { padding: 10px; min-height: 380px;}
+.tabsCls { min-height: 380px;}
 .search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
 .mr10 { margin-right: 10px; }
 .text-right { text-align: right; }

src/view/key-person/key_dm_leave/index.vue

 <template>
   <div class="key-dm-leave-wrapper">
-    <Tabs v-model="activeTab" @on-click="handleTabChange">
+    <Tabs v-model="activeTab" @on-click="handleTabChange" class="tabsCls">
       <TabPane label="请假申请" name="apply">
         <div class="search-div">
           <Row type="flex" :gutter="16">
@@ -62,13 +62,13 @@
       <TabPane label="请假统计" name="stats">
         <div class="search-div">
           <Row type="flex" :gutter="16" align="middle">
-            <Col span="8">
-              <span>时间段：</span>
-              <DatePicker v-model="statsRange" type="daterange" placeholder="选择时间段" style="width:70%" />
-            </Col>
-            <Col span="8">
+            <Col span="16">
+              <span>开始：</span>
+              <DatePicker v-model="statsStart" type="date" placeholder="开始日期" style="min-width:110px;margin-right:20px" />
+              <span>结束：</span>
+              <DatePicker v-model="statsEnd" type="date" placeholder="结束日期" style="min-width:110px;margin-right:20px" />
               <span>部门：</span>
-              <Input v-model="statsDept" placeholder="请输入部门名称或ID" style="width:65%" />
+              <Input v-model="statsDept" placeholder="请输入部门名称或ID" style="width: 150px" />
             </Col>
             <Col span="8" class="text-right">
               <Button type="primary" class="mr10" @click="loadStats">统计</Button>
@@ -228,7 +228,8 @@ export default {
       applyModal: { visible: false, isEdit: false, saving: false, form: {} },
       approveModal: { visible: false, record: {}, comment: '', submitting: false },
       detailModal: { visible: false, loading: false, data: {}, approvals: [] },
-      statsRange: [],
+      statsStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+      statsEnd: new Date(),
       statsDept: ''
     }
   },
@@ -346,8 +347,8 @@ export default {
     loadStats () {
       this.loading.stats = true
       const params = {
-        start: this.statsRange && this.statsRange[0],
-        end: this.statsRange && this.statsRange[1],
+        start: this.statsStart,
+        end: this.statsEnd,
         department: this.statsDept
       }
       getLeaveStats({ params }).then(ret => {
@@ -359,7 +360,8 @@ export default {
       }).finally(() => { this.loading.stats = false })
     },
     resetStats () {
-      this.statsRange = []
+      this.statsStart = null
+      this.statsEnd = null
       this.statsDept = ''
       this.tables.stats = []
     }
@@ -368,7 +370,8 @@ export default {
 </script>
 
 <style scoped>
-.key-dm-leave-wrapper { padding: 10px; }
+.key-dm-leave-wrapper { padding: 10px; min-height: 380px;}
+.tabsCls { min-height: 380px;}
 .search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
 .mr10 { margin-right: 10px; }
 .text-right { text-align: right; }