优化代码

src/App.vue

@@ -520,4 +520,32 @@ h3 {
 .el-date-editor.el-input{
   width: 100%;
 }
+
+.list-group-border-radius {
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  background: #fff;
+}
+
+.list-group {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list-group-item {
+  padding: 12px 15px;
+  cursor: pointer;
+  /*border-bottom: 1px solid #ebeef5;*/
+}
+
+.list-group-item:hover {
+  background-color: #f5f7fa;
+}
+
+.vc-node-selected {
+  background-color: #409eff;
+  color: #fff;
+  font-weight: bold;
+}
 </style> 

src/views/fee/feeConfigManageList.vue

@@ -2,7 +2,7 @@
   <div class="animated fadeInRight padding">
     <el-row :gutter="10">
       <el-col :span="3">
-        <div class="border-radius">
+        <div class="list-group-border-radius">
           <div class=" treeview">
             <ul class="list-group text-center ">
               <li v-for="(item, index) in feeTypeCds" :key="index" @click="swatchFeeTypeCd(item)"
@@ -310,33 +310,8 @@ export default {
 </script>
 
 <style scoped>
-.border-radius {
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  background: #fff;
-}
 
-.list-group {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
 
-.list-group-item {
-  padding: 12px 15px;
-  cursor: pointer;
-  /*border-bottom: 1px solid #ebeef5;*/
-}
-
-.list-group-item:hover {
-  background-color: #f5f7fa;
-}
-
-.vc-node-selected {
-  background-color: #409eff;
-  color: #fff;
-  font-weight: bold;
-}
 
 .margin-xs-r {
   margin-right: 5px;

src/views/oa/attendanceClassesStaffManageList.vue

@@ -1,21 +1,20 @@
 <template>
   <div class="attendance-classes-staff-manage-container">
-    <el-row :gutter="20">
+    <el-row :gutter="10">
-      <el-col :span="4">
+      <el-col :span="3">
-        <el-card class="tree-card">
+        <div class="list-group-border-radius">
-          <div class="treeview attendance-staff">
+          <div class=" treeview">
-            <ul class="list-group">
+            <ul class="list-group text-center ">
-              <li v-for="(item, index) in attendanceClassesStaffManageInfo.attendanceClassess" :key="index"
+              <li v-for="(item, index) in attendanceClassesStaffManageInfo.attendanceClassess" :key="index" @click="swatchClass(item)"
-                class="list-group-item node-orgTree"
                 :class="{ 'vc-node-selected': attendanceClassesStaffManageInfo.conditions.classesId == item.classesId }"
-                @click="swatchClass(item)">
+                class="list-group-item node-orgTree">
                 {{ item.classesName }}
               </li>
             </ul>
           </div>
-        </el-card>
+        </div>
       </el-col>
-      <el-col :span="20">
+      <el-col :span="21">
         <el-card>
           <div slot="header" class="flex justify-between">
             <span>{{ $t('attendanceClassesStaffManage.search.title') }}</span>

src/views/oa/oaWorkflowManageList.vue

@@ -7,28 +7,14 @@
       </div>
       <el-row :gutter="20">
         <el-col :span="6">
-          <el-input
+          <el-input v-model.trim="searchForm.flowName" :placeholder="$t('oaWorkflowManage.search.flowNamePlaceholder')"
-            v-model.trim="searchForm.flowName"
+            clearable />
-            :placeholder="$t('oaWorkflowManage.search.flowNamePlaceholder')"
-            clearable
-          />
         </el-col>
         <el-col :span="6">
-          <el-select
+          <el-select v-model="searchForm.flowType" :placeholder="$t('oaWorkflowManage.search.flowTypePlaceholder')"
-            v-model="searchForm.flowType"
+            style="width:100%">
-            :placeholder="$t('oaWorkflowManage.search.flowTypePlaceholder')"
+            <el-option :label="$t('oaWorkflowManage.search.selectAll')" value="" />
-            style="width:100%"
+            <el-option v-for="item in flowTypes" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
-          >
-            <el-option
-              :label="$t('oaWorkflowManage.search.selectAll')"
-              value=""
-            />
-            <el-option
-              v-for="item in flowTypes"
-              :key="item.statusCd"
-              :label="item.name"
-              :value="item.statusCd"
-            />
           </el-select>
         </el-col>
         <el-col :span="6">
@@ -48,126 +34,55 @@
     <el-card class="list-wrapper">
       <div slot="header" class="flex justify-between">
         <span>{{ $t('oaWorkflowManage.list.title') }}</span>
-        <el-button
+        <el-button type="primary" size="small" style="float:right" @click="handleAdd">
-          type="primary"
-          size="small"
-          style="float:right"
-          @click="handleAdd"
-        >
           <i class="el-icon-plus"></i>
           {{ $t('oaWorkflowManage.list.addWorkflow') }}
         </el-button>
       </div>
 
-      <el-table
+      <el-table v-loading="loading" :data="tableData" border style="width:100%">
-        v-loading="loading"
+        <el-table-column prop="flowId" :label="$t('oaWorkflowManage.table.flowId')" align="center" />
-        :data="tableData"
+        <el-table-column prop="flowName" :label="$t('oaWorkflowManage.table.flowName')" align="center" />
-        border
+        <el-table-column prop="flowType" :label="$t('oaWorkflowManage.table.flowType')" align="center">
-        style="width:100%"
-      >
-        <el-table-column
-          prop="flowId"
-          :label="$t('oaWorkflowManage.table.flowId')"
-          align="center"
-        />
-        <el-table-column
-          prop="flowName"
-          :label="$t('oaWorkflowManage.table.flowName')"
-          align="center"
-        />
-        <el-table-column
-          prop="flowType"
-          :label="$t('oaWorkflowManage.table.flowType')"
-          align="center"
-        >
           <template slot-scope="scope">
-            {{ scope.row.flowType === '1001' ? $t('oaWorkflowManage.table.normalFlow') : $t('oaWorkflowManage.table.unknown') }}
+            {{ scope.row.flowType === '1001' ? $t('oaWorkflowManage.table.normalFlow') :
+              $t('oaWorkflowManage.table.unknown') }}
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column prop="modelId" :label="$t('oaWorkflowManage.table.modelId')" align="center" />
-          prop="modelId"
+        <el-table-column prop="flowKey" label="KEY" align="center" />
-          :label="$t('oaWorkflowManage.table.modelId')"
+        <el-table-column prop="state" :label="$t('oaWorkflowManage.table.state')" align="center">
-          align="center"
-        />
-        <el-table-column
-          prop="flowKey"
-          label="KEY"
-          align="center"
-        />
-        <el-table-column
-          prop="state"
-          :label="$t('oaWorkflowManage.table.state')"
-          align="center"
-        >
           <template slot-scope="scope">
-            {{ scope.row.state === 'C' ? $t('oaWorkflowManage.table.deployed') : $t('oaWorkflowManage.table.pendingDeploy') }}
+            {{ scope.row.state === 'C' ? $t('oaWorkflowManage.table.deployed') :
+              $t('oaWorkflowManage.table.pendingDeploy') }}
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column prop="describle" :label="$t('oaWorkflowManage.table.describle')" align="center" width="150" />
-          prop="describle"
+        <el-table-column prop="createTime" :label="$t('oaWorkflowManage.table.createTime')" align="center" />
-          :label="$t('oaWorkflowManage.table.describle')"
+        <el-table-column :label="$t('common.operation')" align="center" width="300" fixed="right">
-          align="center"
-          width="150"
-        />
-        <el-table-column
-          prop="createTime"
-          :label="$t('oaWorkflowManage.table.createTime')"
-          align="center"
-        />
-        <el-table-column
-          :label="$t('common.operation')"
-          align="center"
-          width="300"
-          fixed="right"
-        >
           <template slot-scope="scope">
-            <el-button
+            <el-button size="mini" type="text" @click="handleWorkflowEditor(scope.row)">
-              size="mini"
-              @click="handleWorkflowEditor(scope.row)"
-            >
               {{ $t('oaWorkflowManage.table.workflow') }}
             </el-button>
-            <el-button
+            <el-button size="mini" type="text" @click="handleWorkflowForm(scope.row)">
-              size="mini"
-              @click="handleWorkflowForm(scope.row)"
-            >
               {{ $t('oaWorkflowManage.table.designForm') }}
             </el-button>
-            <el-button
+            <el-button type="text" v-if="scope.row.state === 'W'" size="mini"  @click="handleDeploy(scope.row)">
-              v-if="scope.row.state === 'W'"
-              size="mini"
-              type="success"
-              @click="handleDeploy(scope.row)"
-            >
               {{ $t('oaWorkflowManage.table.deploy') }}
             </el-button>
-            <el-button
+            <el-button size="mini" type="text" @click="handleEdit(scope.row)">
-              size="mini"
-              type="primary"
-              @click="handleEdit(scope.row)"
-            >
               {{ $t('common.edit') }}
             </el-button>
-            <el-button
+            <el-button size="mini" type="text" @click="handleDelete(scope.row)">
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.row)"
-            >
               {{ $t('common.delete') }}
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <el-pagination
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
-        :current-page="pagination.current"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
-        :page-sizes="[10, 20, 30, 50]"
+        @current-change="handleCurrentChange" />
-        :page-size="pagination.size"
-        :total="pagination.total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
     </el-card>
 
     <!-- 组件 -->