Quellcode durchsuchen

修改头部导航bug

chenrui  vor 2 Jahren
Ursprung
Commit
ebd95ca5a7
2 geänderte Dateien mit 162 neuen und 51 gelöschten Zeilen
  1. 153 51
      src/components/Table/index.vue
  2. 9 0
      src/layout/components/ToolBar/index.vue

+ 153 - 51
src/components/Table/index.vue

@@ -1,12 +1,38 @@
 <template>
   <div class="data-table">
-    <div :style="{ 'min-height': minHeight + 'vh' }" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
+    <div
+      :style="{ 'min-height': minHeight + 'vh' }"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      class="data-table-content"
+    >
       <div v-if="isBtn" class="data-table-btn flex-end">
-        <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
+        <el-button size="small" @click="handleAdd" plain type="primary"
+          >新增</el-button
+        >
       </div>
       <template v-if="tableData.length">
-        <el-table :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe show-summary border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%; overflow: auto">
-          <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel">
+        <el-table
+          :data="filteredTableData"
+          :summary-method="getSummaries"
+          :span-method="tableSpanMethod"
+          stripe
+          show-summary
+          border
+          ref="table"
+          :height="minHeight - 8 + 'vh'"
+          class="table"
+          style="width: 100%; overflow: auto"
+        >
+          <el-table-column
+            v-for="(item, index) in tableColsCopy"
+            :sortable="item.needSort ? true : false"
+            :key="index"
+            :prop="item.columnName"
+            :label="item.columnLabel"
+          >
             <template #header>
               <span class="colTips">
                 <el-tooltip :content="item.columnDescribe" placement="top">
@@ -14,18 +40,38 @@
                 </el-tooltip>
               </span>
               <span v-if="item.needFilters">
-                <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
-                  <i slot="reference" :class="[
+                <el-popover
+                  placement="bottom"
+                  trigger="click"
+                  @show="popoverShowHandler(item.columnName)"
+                  @hide="popoverHideHandler"
+                >
+                  <i
+                    slot="reference"
+                    :class="[
                       'filter-arrow',
                       'el-icon-arrow-down',
                       arrowClass(item.columnName),
-                    ]" />
+                    ]"
+                  />
                   <el-form>
                     <el-form-item :label="item.columnLabel">
-                      <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
-                        <el-option v-for="(option, optionIndex) in tableDataFilters[
+                      <el-select
+                        v-model="filterValues[item.columnName]"
+                        size="small"
+                        placeholder="筛选"
+                        default-first-option
+                        filterable
+                        clearable
+                      >
+                        <el-option
+                          v-for="(option, optionIndex) in tableDataFilters[
                             item.columnName
-                          ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
+                          ]"
+                          :key="option.value + optionIndex"
+                          :value="option.value"
+                          :label="option.text"
+                        />
                       </el-select>
                     </el-form-item>
                   </el-form>
@@ -37,8 +83,20 @@
             <template slot-scope="scope">
               <div class="hd-td">
                 <div class="hd-tr">
-                  <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
-                  <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
+                  <el-button
+                    type="text"
+                    @click="handleEdit(scope.row)"
+                    size="small"
+                    class="rmScs"
+                    >编辑</el-button
+                  >
+                  <el-button
+                    class="rmSc"
+                    type="text"
+                    @click="handleRemove(scope.row)"
+                    size="small"
+                    >删除</el-button
+                  >
                 </div>
               </div>
             </template>
@@ -55,18 +113,45 @@
         <div class="dialog-content">
           <div class="title">{{ tableTitle }}</div>
           <div class="content">
-            <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
+            <el-form
+              ref="ruleForm"
+              :model="tableForm"
+              :label-width="labelWidth"
+            >
               <el-row :gutter="20">
-                <el-col v-for="(item, index) in tableColsCopy" :key="index" :span="rows">
+                <el-col
+                  v-for="(item, index) in tableColsCopy"
+                  :key="index"
+                  :span="rows"
+                >
                   <el-form-item :label="item.columnLabel">
-                    <template v-if="item.listqueryTemplateID || item.listqueryTemplateID == 0">
-                      <el-select size="small" clearable style="width:100%" v-model="tableForm[item.columnName]" placeholder="请选择">
-                        <el-option v-for="item in tableOptions[item.columnName]" :key="item.v" :label="item.k" :value="item.v">
+                    <template
+                      v-if="
+                        item.listqueryTemplateID ||
+                        item.listqueryTemplateID == 0
+                      "
+                    >
+                      <el-select
+                        size="small"
+                        clearable
+                        style="width: 100%"
+                        v-model="tableForm[item.columnName]"
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          v-for="item in tableOptions[item.columnName]"
+                          :key="item.v"
+                          :label="item.k"
+                          :value="item.v"
+                        >
                         </el-option>
                       </el-select>
                     </template>
                     <template v-else>
-                      <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
+                      <el-input
+                        size="small"
+                        v-model="tableForm[item.columnName]"
+                      ></el-input>
                     </template>
                   </el-form-item>
                 </el-col>
@@ -74,7 +159,13 @@
             </el-form>
           </div>
           <div class="foot right t30">
-            <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
+            <el-button
+              size="medium"
+              @click="handleOk"
+              class="r24"
+              type="primary"
+              >确定</el-button
+            >
             <el-button @click="flag = false" size="medium">取消</el-button>
           </div>
         </div>
@@ -83,11 +174,20 @@
         <div class="airportInfoDialog">
           <div class="title del-title">删除</div>
           <div class="content del-content">
-            <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
+            <span class="el-icon-error error r10"></span>您是否确认删除<span
+              class="error l10"
+              >{{ rmTitle }}</span
+            >
           </div>
           <div class="foot right Delfoot t30">
-            <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
+            <el-button
+              size="medium"
+              class="r24"
+              @click="tableRemove"
+              type="danger"
+              >删除</el-button
+            >
             <el-button size="medium" @click="rmFlag = false">取消</el-button>
           </div>
         </div>
@@ -135,7 +235,7 @@ export default {
     },
   },
   components: { Dialog, NoData },
-  data () {
+  data() {
     return {
       loading: false,
       flag: false,
@@ -156,12 +256,12 @@ export default {
       tableForm: {}, //弹框表单
       rmTitle: "", //弹框-删除-标题
       tableObj: {}, //增/删/改数据缓存
-      tableOptions: {} //弹框-下来数据缓存
+      tableOptions: {}, //弹框-下来数据缓存
     };
   },
   computed: {
     //设置表头-下拉-箭头样式
-    arrowClass () {
+    arrowClass() {
       return function (prop) {
         let classString = "";
         if (this.colShowFilter === prop) {
@@ -178,7 +278,7 @@ export default {
       };
     },
     //设置表头-下拉-选中数据
-    filteredTableData () {
+    filteredTableData() {
       return this.tableData.filter((item) => {
         let flag = true;
         Object.entries(this.filterValues).forEach(([key, value]) => {
@@ -190,12 +290,12 @@ export default {
       });
     },
   },
-  created () {
+  created() {
     this.getQuery();
   },
   methods: {
     //获取表格数据
-    async getQuery () {
+    async getQuery() {
       try {
         this.loading = true;
         const { code, returnData } = await Query({
@@ -220,7 +320,7 @@ export default {
       }
     },
     //表格-增/删/改
-    async generalDataReception (data) {
+    async generalDataReception(data) {
       try {
         const { code, message } = await GeneralDataReception({
           serviceId: this.serviceId,
@@ -249,7 +349,7 @@ export default {
       }
     },
     //初始化表格
-    initTableData () {
+    initTableData() {
       this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
       this.tableDataCopy = _.cloneDeep(this.tableData);
       const datas = _.cloneDeep(this.tableColsCopy);
@@ -259,7 +359,9 @@ export default {
           this.tableGroups.push(item.columnName);
         }
         if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
-          this.tableOptions[item.columnName] = await this.getSelectData(item.listqueryTemplateID)
+          this.tableOptions[item.columnName] = await this.getSelectData(
+            item.listqueryTemplateID
+          );
         }
         // this.filterValues[item.columnName] = ''
       });
@@ -267,19 +369,19 @@ export default {
       this.tableGroup(this.tableData);
     },
     //获取弹框-下拉数据
-    async getSelectData (id) {
+    async getSelectData(id) {
       const { code, returnData } = await Query({
         id,
         dataContent: [],
       });
       if (code == 0) {
-        return returnData.listValues
+        return returnData.listValues;
       } else {
-        return []
+        return [];
       }
     },
     //分组
-    tableGroup (tableData) {
+    tableGroup(tableData) {
       const spanArr = [];
       let pos = 0;
       let ifYj = this.tableGroups[0];
@@ -299,14 +401,14 @@ export default {
       this.spanArr = spanArr;
       this.pos = pos;
     },
-    popoverShowHandler (prop) {
+    popoverShowHandler(prop) {
       this.colShowFilter = prop;
     },
-    popoverHideHandler () {
+    popoverHideHandler() {
       this.colShowFilter = "";
     },
     //分组
-    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (this.tableGroups.includes(column["property"])) {
         const _row = this.spanArr[rowIndex];
         const _col = _row > 0 ? 1 : 0;
@@ -317,14 +419,14 @@ export default {
       }
     },
     //合计
-    getSummaries (param) {
+    getSummaries(param) {
       const { columns, data } = param;
       const sums = [];
       columns.forEach((column, index) => {
-        this.tableColsCopy.forEach(p => {
+        this.tableColsCopy.forEach((p) => {
           if (column.property == p.columnName && p.needCount) {
-            const values = data.map(item => Number(item[column.property]));
-            if (!values.every(value => isNaN(value))) {
+            const values = data.map((item) => Number(item[column.property]));
+            if (!values.every((value) => isNaN(value))) {
               sums[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!isNaN(value)) {
@@ -333,38 +435,38 @@ export default {
                   return prev;
                 }
               }, 0);
-              sums[index] += '';
+              sums[index] += "";
             }
           }
-        })
+        });
       });
       return sums;
     },
     //弹框-确定
-    handleOk () {
+    handleOk() {
       this.submitClickHandler();
     },
     //滚动
-    tableLoad () {
+    tableLoad() {
       console.log("d");
     },
     //表格-新增
-    handleAdd () {
+    handleAdd() {
       this.flag = true;
       this.tableType = "add";
       this.tableTitle = "新增";
       this.tableForm = {};
-      console.log(this.tableOptions)
+      console.log(this.tableOptions);
     },
     //表格-编辑
-    handleEdit (row) {
+    handleEdit(row) {
       this.flag = true;
       this.tableType = "edit";
       this.tableTitle = "编辑";
       this.tableForm = row;
     },
     // 新增/编辑-确认
-    submitClickHandler () {
+    submitClickHandler() {
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
           if (this.tableType == "add") {
@@ -379,13 +481,13 @@ export default {
       });
     },
     //表格-删除
-    handleRemove (row) {
+    handleRemove(row) {
       this.rmFlag = true;
       this.rmTitle = row.className;
       this.tableObj = row;
     },
     //表格-删除-确认
-    tableRemove () {
+    tableRemove() {
       this.tableObj.event = 3;
       this.generalDataReception(this.tableObj);
     },

+ 9 - 0
src/layout/components/ToolBar/index.vue

@@ -45,10 +45,12 @@ export default {
   created() {
     const path = this.$route.path;
     const pathArr = path.split("/");
+    // console.log(path);
     if (pathArr.length > 2) {
       //子路由
       const name = pathArr[pathArr.length - 2];
       const childName = pathArr[pathArr.length - 1];
+      path;
       this.getRoutes(name, childName);
     } else {
       //一级路由
@@ -79,6 +81,13 @@ export default {
       } else {
         this.dataArr = arrs;
       }
+      if (this.dialog == false) {
+        this.dataArr.forEach((res, index) => {
+          if (res.path == this.$route.path) {
+            this.$store.dispatch("app/toggleDialog", index);
+          }
+        });
+      }
     },
   },
 };