优化搜索栏组件，new-table组件，改造权限自助管理页

config/dev.env.js

@@ -35,7 +35,8 @@ module.exports = merge(prodEnv, {
         "/dcucauth": {
             // target: "http://10.11.1.237:8861"
             // target: "http://10.254.11.203:8861"
-             target: "http://192.168.10.2:8871"
+            //  target: "http://192.168.10.2:8871"
+               target: "http://192.168.6.133:3471"
 
         }
     })

src/components/search-bar/index.vue

@@ -7,8 +7,17 @@
   <div>
     <el-form :inline="true">
       <el-form-item v-for="(item, index) in form" :key="index" :label="item.label">
+        <template v-if="item.component !== 'SelectOrgTree' && item.component !== 'DgDatePicker'">
+          <component
+            :is="item.component"
+            v-model="item.value"
+            v-bind="item.attr"
+            :placeholder="setPlaceHolder(item)"
+            clearable
+          />
+        </template>
         <!-- 下拉机构树 -->
-        <template v-if="item.component == 'SelectOrgTree'">
+        <template v-else-if="item.component == 'SelectOrgTree'">
           <select-org-tree
             ref="orgTree"
             :api-name="item.apiName || 'getOrgTree'"
@@ -17,8 +26,20 @@
             @orgTreeValue="getTreeValue"
           ></select-org-tree>
         </template>
-        <template v-else>
-          <component :is="item.component" v-model="item.value" v-bind="item.attr" clearable />
+        <!-- 时间 -->
+        <template v-else-if="item.component == 'DgDatePicker'">
+          <dg-date-picker
+            v-model="item.value"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            clearable
+            :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
+            :unlink-panels="true"
+            :default-time="['00:00:00', '23:59:59']"
+          >
+          </dg-date-picker>
         </template>
       </el-form-item>
       <el-form-item>
@@ -60,11 +81,12 @@ export default {
     handleSearch() {
       let condition = {};
       this.form.forEach((item) => {
-        const { name, value, op, format } = item;
+        const { name, value, op, format, type } = item;
         condition[name] = {
           value,
           op,
-          format
+          format,
+          type
         };
       });
       this.$emit('submitSearch', condition);
@@ -80,6 +102,21 @@ export default {
     },
     getTreeValue(val) {
       this.form.find((item) => item.name == 'orgId').value = val;
+    },
+    setPlaceHolder(item) {
+      const { component, label } = item;
+      const inputType = ['ElInput, DgInput'];
+      const selectType = ['ElSelect', 'DgSelect', 'DgDatePicker'];
+      let prefix;
+      if (inputType.includes(component)) {
+        prefix = '请输入';
+      } else if (selectType.includes(component)) {
+        prefix = '请选择';
+      } else {
+        prefix = '请输入';
+      }
+
+      return prefix + label;
     }
   },
   created() {},

src/pages/common/new-table/index.vue

@@ -16,6 +16,7 @@
       :lazy="lazy"
       :load="load"
       :before-quest="handleBeforeQuest"
+      :before-search="handleBeforeSearch"
       @selection-change="handleSelectionChange"
       @select="handleSelect"
       @select-all="handleCheckAll"
@@ -110,8 +111,24 @@ export default {
     handleSelectionChange(data) {
       this.$emit('handleSelectionChange', data);
     },
-     getReqSearchCondition() {
-      return this.$refs.baseTable.getReqSearchCondition();
+    //  getReqSearchCondition() {
+    //   return this.$refs.baseTable.getReqSearchCondition();
+    // },
+
+    handleBeforeSearch(conditions) {
+      let searchConditionObj = JSON.parse(conditions.searchCondition);
+      let result = [];
+      for (let i = 0; i < searchConditionObj.length; i++) {
+        const { op, value } = searchConditionObj[i];
+        if (op == 'between' && value[0]) {
+          result.push({ ...searchConditionObj[i], op: '>=', value: value[0] });
+          result.push({ ...searchConditionObj[i], op: '<=', value: value[1] });
+        } else {
+          result.push(searchConditionObj[i]);
+        }
+      }
+      conditions.searchCondition = JSON.stringify(result);
+      return conditions;
     },
 
     /**

src/pages/permission-selfhelp-manage/index.vue

@@ -6,40 +6,11 @@
 <template>
   <div>
     <!-- 搜索项 -->
-    <el-form ref="ruleForm" inline :model="form">
-      <el-form-item label="流程标题">
-        <el-input v-model="form.flowTitle.value" placeholder="请输入流程标题" clearable></el-input>
-      </el-form-item>
-      <el-form-item label="审批类型">
-        <dg-select v-model="form.applyType.value" placeholder="请选择审批类型" enum="SelfAuthApplyTypeEnum" clearable>
-        </dg-select>
-      </el-form-item>
-      <el-form-item label="创建时间">
-        <dg-date-picker
-          v-model="form.createTime.value"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          clearable
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :unlink-panels="true"
-          :default-time="['00:00:00', '23:59:59']"
-        >
-        </dg-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
-        <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
-      </el-form-item>
-    </el-form>
-    <dg-row zebra="10px">
-      <dg-button type="primary" @click="handleApplyPermission(false)" icon="el-icon-circle-plus-outline"
-        >权限变更申请</dg-button
-      >
-    </dg-row>
+    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
+    <!-- 操作栏 -->
+    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
     <!-- 表格 -->
-    <Table ref="myTable" :url="tableUrl" :headerData="tableHeader" :condition="form">
+    <new-table ref="table" :tableUrl="tableUrl" :tableHeader="tableHeader" :condition="condition">
       <dg-table-column label="操作" align="center">
         <template slot-scope="{ row }">
           <div class="u-table__operation">
@@ -58,56 +29,67 @@
           </div>
         </template>
       </dg-table-column>
-    </Table>
+    </new-table>
   </div>
 </template>
 
 <script>
-import Table from '@/pages/common/table';
+import newTable from '@/pages/common/new-table';
 import { tableHeader } from './DataConfig';
 import { tableUrl, delApply, recallApply } from '@/api/permission-selfhelp-manage';
+import operateBar from '@/components/operate-bar';
+import searchBar from '@/components/search-bar';
+import { searchOpt } from '@/mixins/page-opt';
 export default {
   components: {
-    Table
+    newTable,
+    operateBar,
+    searchBar
   },
+  mixins: [searchOpt],
   data() {
     return {
       tableUrl,
       tableHeader,
-      form: {
-        flowTitle: {
+      conditionForm: [
+        {
+          label: '流程标题',
+          name: 'flowTitle',
+          op: 'like',
           value: '',
-          op: 'like'
+          component: 'ElInput',
+          attr: {
+            placeholder: '请输入流程标题'
+          }
         },
-        applyType: {
+        {
+          label: '审批类型',
+          name: 'applyType',
+          op: '=',
           value: '',
-          op: '='
+          component: 'DgSelect',
+          attr: {
+            placeholder: '请选择审批类型',
+            enum: 'SelfAuthApplyTypeEnum'
+          }
         },
-        createTime: {
-          value: '',
+        {
+          label: '创建时间',
+          name: 'createTime',
           op: 'between',
           type: 'DATE',
-          format: 'yyyy-MM-dd HH:mm:ss'
-
-          // format: 'yyyyMMddHHmmss'
+          value: '',
+          component: 'DgDatePicker'
         }
-      }
+      ],
+      pageOptList: ['权限变更申请']
     };
   },
   computed: {},
   methods: {
-    /**
-     * 查询
-     */
-    handleSearch() {
-      this.$refs.myTable.handleSearchClick();
-    },
-    /**
-     * 重置
-     */
-    handleReset() {
-      for (const key in this.form) {
-        this.form[key].value = '';
+    receviceOpt(btn, row) {
+      if (btn == '权限变更申请') {
+        this.handleApplyPermission(null);
       }
     },
     /**