Merge pull request 'huyt' (#5) from huyt into dev

Reviewed-on: http://192.168.2.237:3000/root/middleground_code_v2/pulls/5

src/components/base/baseLayout/index.vue

@@ -5,219 +5,142 @@
 -->
 <!-- style="overflow: auto;" -->
 <template>
-  <div
+  <div class="container" v-loading="loading" :style="'backgroundColor:' +
-    class="container"
+    bgColor +
-    v-loading="loading"
+    ';paddingBottom:' +
-    :style="
+    paddingBottom +
-      'backgroundColor:' +
+    ';height:' +
-      bgColor +
+    bodyHight
-      ';paddingBottom:' +
+    " ref="baseLayout">
-      paddingBottom +
-      ';height:' +
-      bodyHight
-    "
-  >
     <!-- 标题       -->
-    <div class="title" flex="cross:center" v-if="showTitle">
+    <div flex="cross:center" style="padding: 10px" :style="{
-      <span v-if="!$route.meta.back">{{ title }}</span>
+      'justify-content':
-      <span @click="goBack" class="back" v-else
+        searchShow || showTitle ? 'space-between' : 'flex-end',
-      ><i class="el-icon-arrow-left"></i>返回</span
+    }" v-if="showTitle">
-      >
+      <div class="title" v-if="showTitle">
-    </div>
+        <span v-if="showTitle">{{ title }}</span>
-
-    <!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
-    <div
-      class="main"
-      :style="{
-        height: showTitle ? 'calc(100% - 38px)' : '100%',
-        backgroundColor: mainColor,
-      }"
-    >
-      <!-- 操作按钮 -->
-      <div
-        class="pushButton"
-        flex="cross:centet main:right cross:center"
-        v-if="operateButtonSwitch"
-      >
-        <div class="operationButton" flex="cross:center">
-          <div v-if="defaultButtonSwitch" style="margin-right: 5px">
-            <el-button
-              v-for="(item, index) in defaultButtonList"
-              :type="item.type ? item.type : 'primary'"
-              size="small"
-              class="iconfont buttonList"
-              :icon="item.icon"
-              @click="funNewClick(item)"
-              :key="index"
-            >
-              {{ item.menuName }}
-            </el-button>
-          </div>
-          <slot name="btn"></slot>
-          <el-button
-            v-for="(item, index) in buttonList"
-            :type="item.type ? item.type : 'primary'"
-            size="small"
-            class="iconfont buttonList"
-            :icon="item.icon"
-            @click="funNewClick(item)"
-            :key="index"
-          >
-            <span v-if="item.menuName">{{ item.menuName }}</span>
-          </el-button>
-        </div>
-        <div v-if="fixedButton" style="margin-left: 5px">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="item.title"
-            placement="top"
-            v-for="(item, index) in fixedButtonList"
-            :key="index"
-            trigger="hover"
-          >
-            <span>
-              <el-button
-                size="mini"
-                :icon="item.icon"
-                @click.stop="fixedClick(item)"
-                style="margin: 0"
-              ></el-button>
-            </span>
-          </el-tooltip>
-        </div>
       </div>
+      <div flex="cross:center" v-if="searchShow">
+        <i class="queryIcon" :class="queryShow ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
+           @click="queryShowChange"></i>
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link" style="cursor: pointer; color: #303133; font-size: 14px">
+            默认条件<i class="el-icon-arrow-down el-icon--right" style="margin-left: 8px"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" style="
+              padding: 7px 20px;
+              background-color: #f5f7fa;
+              border: 1px soild #dcdfe6;
+            ">
+            <el-dropdown-item command="a" class="requirementList">默认查询
+            </el-dropdown-item>
+            <el-dropdown-item v-for="(item, index) in requirementList" :key="item.command" :command="item.command">
+              <div flex="cross:center main:justify">
+                <p>{{ item.title }}</p>
+                <div flex="cross:center ">
+                  <i class="el-icon-edit" @click="edit(item)"></i>
+                  <i class="el-icon-close" @click="del(item)"></i>
+                </div>
+              </div>
+            </el-dropdown-item>
+            <el-dropdown-item command="d">创建方案</el-dropdown-item>
+            <el-dropdown-item command="e">高级查询</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <!-- <p>高级查询</p> -->
+      </div>
+      <div flex="cross:centet" v-if="buttonList && buttonList.length > 0">
+        <el-dropdown v-for="(item, index) in buttonList" class="buttonList" :key="index" @command="dropClick">
+          <el-button :type="item.type ? item.type : 'primary'" size="small" class="iconfont" :icon="item.icon"
+                     @keyup.prevent.native @keydown.enter.prevent.native @click="funNewClick(item)">
+            {{
+              item.menuName
+            }}<i v-if="item.dropList && item.dropList.length > 0" class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <!-- <i class="el-icon-arrow-down el-icon--right"> -->
+            <el-dropdown-item v-for="(dropItem, dropIndex) in item.dropList" :key="dropIndex" :icon="dropItem.icon"
+                              :command="dropItem.dropFun">{{ dropItem.title }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </div>
+    <!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
+    <!-- 搜索 -->
+    <div class="main" :style="'height:' + mainHight + ';backgroundColor:' + mainColor">
       <!-- 搜索 -->
-      <div
+      <div v-show="queryShow" style="padding: 16px;" flex="cross:center" ref="serchRefs" class="searchContainer">
-        v-show="querySwitch"
+        <div v-for="(row, indexRow) in searchList" class="searchBox" :key="indexRow">
-        style="padding: 5px; background-color: #fff"
+          <el-input v-model="ruleForm[row.prop]" clearable :type="row.type ? row.type : 'text'" style="width: 100%"
-        flex="cross:center"
+                    :placeholder="!row.placeholder ? '请输入' : row.placeholder" v-if="row.tag === 'elInput'" min="1">
-        ref="serchRefs"
-        class="searchForTable"
-      >
-        <div
-          v-for="(row, indexRow) in searchList"
-          class="searchBox"
-          :key="indexRow"
-          style="margin-right: 5px"
-        >
-          <el-input
-            v-model="ruleForm[row.columnNameEN]"
-            clearable
-            :type="row.type ? row.type : 'text'"
-            style="width: 100%"
-            :placeholder="!row.columnNameCN ? '请输入' : row.columnNameCN"
-            v-if="row.tag === 'elInput'"
-            min="1"
-            @keydown.enter.native="handerInputEnter()"
-          >
           </el-input>
-          <el-date-picker
+          <el-date-picker v-model="ruleForm[row.prop]" v-if="row.tag === 'elDatePicker'"
-            v-model="ruleForm[row.columnNameEN]"
+                          :class="{ one: row.type ? 'date' : row.type }" style="width: 100%"
-            v-if="row.tag === 'elDatePicker'"
+                          :value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat" range-separator="至" start-placeholder="开始日期"
-            :class="{ one: row.type ? 'date' : row.type }"
+                          end-placeholder="结束日期" :type="!row.type ? 'date' : row.type"
-            style="width: 100%"
+                          :placeholder="!row.placeholder ? '请选择' : row.placeholder">
-            :value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :type="!row.type ? 'date' : row.type"
-            :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
-          >
           </el-date-picker>
-          <el-radio-group
+          <el-radio-group v-model="ruleForm[row.prop]" v-if="row.tag === 'elRadio'">
-            v-model="ruleForm[row.columnNameEN]"
+            <el-radio-button v-for="el in row.options" :label="el.value" :key="el.value">{{ el.label }}
-            v-if="row.tag === 'elRadio'"
-          >
-            <el-radio-button
-              v-for="el in row.options"
-              :label="el.value"
-              :key="el.value"
-            >{{ el.label }}
             </el-radio-button>
           </el-radio-group>
-          <div
+          <div v-if="row.tag === 'elDialog'" class="elDialog" style="cursor: pointer; height: 32px; ine-height: 32px">
-            v-if="row.tag === 'elDialog'"
+            <p :style="{ color: ruleForm[row.prop] ? '#000' : '#c0c4cc' }" style="width: 100%; margin: 0"
-            class="elDialog"
+               @click="elDialogClick(row, indexRow, indexRow)">
-            style="cursor: pointer; height: 32px; ine-height: 32px"
-          >
-            <p
-              :style="{
-                color: ruleForm[row.columnNameEN] ? '#000' : '#c0c4cc',
-              }"
-              style="width: 100%; margin: 0"
-              @click="elDialogClick(row, index, indexRow)"
-            >
               {{
-                ruleForm[row.columnNameEN]
+                ruleForm[row.prop]
-                  ? ruleForm[row.columnNameEN]
+                  ? ruleForm[row.prop]
-                  : row.columnNameCN
+                  : row.placeholder
-                    ? row.columnNameCN
+                    ? row.placeholder
                     : "请点击选择"
               }}
             </p>
-            <i
+            <i class="el-icon-more" @click="elDialogClick(row, index, indexRow)"
-              class="el-icon-more"
+               v-if="!row.disabled && !ruleForm[row.prop]"></i>
-              @click="elDialogClick(row, index, indexRow)"
+            <i class="el-icon-circle-close" v-if="!row.disabled && ruleForm[row.prop]" @click="elDialogClear(row)"
-              v-if="!row.disabled && !ruleForm[row.columnNameEN]"
+               style="margin-left: 10px"></i>
-            ></i>
-            <i
-              class="el-icon-circle-close"
-              v-if="!row.disabled && ruleForm[row.columnNameEN]"
-              @click="elDialogClear(row)"
-              style="margin-left: 10px"
-            ></i>
           </div>
-          <el-select
+          <el-select v-model="ruleForm[row.prop]" filterable style="width: 100%"
-            v-model="ruleForm[row.columnNameEN]"
+                     @change="selectChange($event, indexRow, indexRow, row)" :clearable="row.clearable ? row.clearable : true"
-            filterable
+                     :placeholder="!row.placeholder ? '请选择' : row.placeholder" v-if="row.tag === 'elSelect'">
-            style="width: 100%"
+            <el-option v-for="(el, elIndex) in row.options" :key="!row.optionValue ? el['value'] : el[row.optionValue]"
-            @change="selectChange($event, indexRow)"
+                       :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
-            :clearable="row.clearable ? row.clearable : true"
+                       :value="!row.optionValue ? el['value'] : el[row.optionValue]">
-            :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
-            v-if="row.tag === 'elSelect'"
-          >
-            <el-option
-              v-for="(el, elIndex) in row.options"
-              :key="!row.optionValue ? el['value'] : el[row.optionValue]"
-              :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
-              :value="!row.optionValue ? el['value'] : el[row.optionValue]"
-            >
             </el-option>
           </el-select>
         </div>
         <!-- 搜索按钮 -->
-        <el-button
+        <!-- 	<el-input
-          type="primary"
+				  auto-complete="off"
-          size="small"
+				  placeholder="验证码"
-          icon="el-icon-search searchIcon"
+				  style="width: calc(100% - 130px)"
-          @click="search"
+				  v-show="false"
-          title="搜索"
+				  clearable
-        >
+				   @keyup.enter.native="testEnter"
-          搜索
+				>
+				</el-input> -->
+        <el-button type="primary" icon="el-icon-search searchIcon" class="searchIcon" v-if="searchBtnShow" @click="search"
+                   @keyup.enter="testEnter" style="margin-left: 15px">
         </el-button>
-        <el-button
+        <el-button type="primary" icon="el-icon-refresh searchIcon" class="searchIcon" v-if="resetBtnShow"
-          v-if="searchList.length > 1"
+                   @click="refresh">
-          type="primary"
+        </el-button>
-          size="small"
+        <el-button v-for="item in searchBtnList" :key="item.btnFunction" :type="item.type ? item.type : 'primary'"
-          icon="el-icon-refresh-left searchIcon"
+                   size="small" class="searchIcon" :icon="item.icon" style="font-size:14px;" @click="funSearchBtnClick(item)">
-          class="searchIcon"
+          {{ item.name }}
-          @click="refresh"
-          title="重置"
-        >重置
         </el-button>
-        <slot name="searchBtn"></slot>
       </div>
-      <div :style="'height:' + getMainHeight()" class="tableHeight">
+      <div flex="cross:center" v-if="(searchModel.length != 0 && bottonShow) || nowBtns.length != 0">
-        <slot name="main" :tableHeight="tableHeight"></slot>
+        <el-button type="primary" icon="el-icon-search" size="small" @click="showSearch" v-if="searchModel.length != 0">检索
+        </el-button>
+        <el-button type="primary" icon="el-icon-refresh" :plain="true" size="small" @click="refresh" v-if="false">刷新
+        </el-button>
       </div>
       <!-- 主要内容  -->
+      <slot name="main" :tableHeight="tableHeight"></slot>
       <!-- 分页 -->
-      <base-page
+      <base-page v-if="isPage" :pageModel.sync="pageModel" @onPageChange="onPageChange"></base-page>
-        v-if="isPage"
-        :pageModel.sync="pageModel"
-        @onPageChange="onPageChange"
-      ></base-page>
     </div>
   </div>
 </template>
@@ -225,6 +148,7 @@
 <script>
 // import heightTransition from '@/common/js/heightTransition'
 // import customCascader from "@/components/customCascader";
+import elementResizeDetectorMaker from "element-resize-detector";
 import { exportDown, wordDown, zipDown } from "@/utils/util.js";
 import basePage from "@/components/base/basePage";
 import { TokenKeys } from "@/utils/variable";
@@ -238,18 +162,59 @@ export default {
     // customCascader
   },
   props: {
+    // 搜索按钮列表
+    searchBtnList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
     // 是否展示标题
     showTitle: {
       type: Boolean,
       default: true,
     },
-
+    // 是否显示搜索按钮
+    searchBtnShow: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示重置按钮
+    resetBtnShow: {
+      type: Boolean,
+      default: true,
+    },
+    // main高度
+    mainHight: {
+      type: [Number, String, Boolean],
+      default: "auto",
+    },
     // 标题
     title: {
       type: String,
       default: "",
     },
-
+    // 标题
+    fixModel: {
+      type: String | Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 查询列表
+    requirementList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 搜索列表
+    searchList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
     // 背景颜色
     bgColor: {
       type: String,
@@ -268,12 +233,7 @@ export default {
     // 高度
     bodyHight: {
       type: [Number, String],
-      default: "100%",
+      default: "calc(100vh - 88px)",
-    },
-    // main高度
-    mainHight: {
-      type: [Number, String, Boolean],
-      default: "calc(100% - 38px)",
     },
     // 搜索配置
     searchModel: {
@@ -282,50 +242,25 @@ export default {
         return [];
       },
     },
-
+    // 搜索配置
+    nowBtnTab: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 按钮配置
+    nowBtns: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
     // 按钮配置
     buttonList: {
       type: Array,
       default: () => {
         return [];
-        // [{
-        // 	icon: 'el-icon-plus',
-        // 	menuName: '新增'
-        // }, {
-        // 	icon: 'el-icon-edit',
-        // 	menuName: '编辑'
-        // }, {
-        // 	icon: 'el-icon-delete',
-        // 	menuName: '删除',
-        // 	type: 'danger'
-        // }, {
-        // 	icon: 'el-icon-refresh',
-        // 	menuName: '刷新'
-        // },]
-      },
-    },
-    defaultButtonList: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            icon: "el-icon-plus",
-            menuName: "新增",
-          },
-          {
-            icon: "el-icon-edit",
-            menuName: "编辑",
-          },
-          {
-            icon: "el-icon-delete",
-            menuName: "删除",
-            type: "danger",
-          },
-          // {
-          // 	icon: 'el-icon-refresh',
-          // 	menuName: '刷新'
-          // },
-        ];
       },
     },
     // 是否展示分页
@@ -333,6 +268,24 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 搜索按钮显示
+    bottonShow: {
+      type: Boolean,
+      default: true,
+    },
+    // 默认条件隐藏显示
+    searchShow: {
+      type: Boolean,
+      default: false,
+    },
+    queryShow: {
+      type: Boolean,
+      default: true,
+    },
+    enterClickType: {
+      type: Boolean,
+      default: true,
+    },
     // 导出接口地址
     exportUrl: {
       default: "",
@@ -341,61 +294,22 @@ export default {
     importUrl: {
       default: "",
     },
+    //多选
+    selectTable: {
+      default: "",
+    },
     //单选
     only: {
       default: "",
     },
-    // 左侧固定按钮
-    fixedButton: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否显示查询条件
-    querySwitch: {
-      type: Boolean,
-      default: false,
-    },
-    // 搜索列表
-    searchList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    // 操作按钮
-    operateButtonSwitch: {
-      type: Boolean,
-      default: true,
-    },
-    // 操作按钮
-    defaultButtonSwitch: {
-      type: Boolean,
-      default: true,
-    },
-    // 右侧按钮
-    fixedButtonList: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            icon: "el-icon-s-operation",
-            title: "筛选",
-          },
-          {
-            icon: "el-icon-printer",
-            title: "打印",
-          },
-          {
-            icon: "el-icon-folder",
-            title: "导出",
-          },
-        ];
-      },
-    },
   },
+  watch: {},
+
   data() {
     return {
+      // 表单数据
       ruleForm: {},
+      // queryShow: true,
       onlyUrl: "",
       clientHeight: "",
       // 上传请求头
@@ -409,47 +323,26 @@ export default {
       // 分页数据
       pageModel: {
         total: 0,
-        page: 1,
+        pageIndex: 1,
-        limit: 20,
+        pageSize: 10,
       },
       // 清除状态
       clearState: 0,
+      // 操作按钮
+      tableHeight: "calc(100vh - 218px)",
       loading: false,
-      // fixedButtonList: [{
-      // 	icon: 'el-icon-s-operation',
-      // 	title: '筛选'
-      // },
-      // {
-      // 	icon: 'el-icon-printer',
-      // 	title: '打印'
-      // },
-      // {
-      // 	icon: 'el-icon-folder',
-      // 	title: '导出'
-      // }
-      // ],
-      // defaultButtonList: [
-      // 	{
-      // 		icon: 'el-icon-plus',
-      // 		menuName: '新增'
-      // 	}, {
-      // 		icon: 'el-icon-edit',
-      // 		menuName: '编辑'
-      // 	}, {
-      // 		icon: 'el-icon-delete',
-      // 		menuName: '删除',
-      // 		type: 'danger'
-      // 	}, {
-      // 		icon: 'el-icon-refresh',
-      // 		menuName: '刷新'
-      // 	},
-      // ],
-      tableHeight: "100%",
     };
   },
-  created() {},
+  created() {
+  },
   mounted() {
-    // this.getTableHight()
+    this.watchSize();
+    document.addEventListener("keydown", (e) => {
+      let key = window.event.keyCode;
+      if (key == 13) {
+        this.testEnter();
+      }
+    });
     // window.onresize = () => {
     // 	this.clientHeight = document.documentElement.clientHeight;
     // },
@@ -461,40 +354,66 @@ export default {
     // }
   },
   methods: {
-    getTableHight() {
+    watchSize() {
-      let height = "100%";
+      const _this = this;
-      let heightReduce = 0;
+      var erd = elementResizeDetectorMaker();
-      if (this.operateButtonSwitch) {
+      if (!this.queryShow) {
-        heightReduce = heightReduce + 53;
+        _this.getTableHight();
+      } else {
+        erd.listenTo(this.$refs.serchRefs, (element) => {
+          // 这里的this.$refs.fan指定要监听的元素对象，对应的是<div ref=“fan”></div>
+          var height = element.offsetHeight;
+          _this.$nextTick(() => {
+            _this.getTableHight(height);
+          });
+        });
       }
-      if (this.querySwitch) {
-        heightReduce = heightReduce + 47;
-      }
-      if (this.isPage) {
-        heightReduce = heightReduce + 53;
-      }
-      height = "calc(100% - " + heightReduce + "px)";
-      this.tableHeight = height;
     },
-    getMainHeight() {
+    getTableHight(height = 0) {
-      // operateButtonSwitch 操作开关 querySwitch查询高 度
+      // 导航栏+标签栏 102   按钮列表64   查询条件64  分页32  102 + 64 + 32
-      let height = "100%";
+      let reduceHight = 0;
-      let heightReduce = 0;
+      let windowHeight = this.$refs.baseLayout.offsetHeight;
-      if (this.operateButtonSwitch) {
-        heightReduce = heightReduce + 56;
-      }
-      if (this.querySwitch) {
-        heightReduce = heightReduce + 33;
-      }
       if (this.isPage) {
-        heightReduce = heightReduce + 56;
+        reduceHight = reduceHight + 52;
       }
-      height = "calc(100% - " + heightReduce + "px)";
+      if (this.queryShow) {
-      // console.log(height, "height")
+        let searchHeight = this.$refs.serchRefs.offsetHeight;
-      return height;
+        reduceHight = reduceHight + searchHeight;
+      }
+      if (this.buttonList && this.buttonList.length > 0) {
+        reduceHight = reduceHight + 68;
+      }
+      this.tableHeight = windowHeight - reduceHight + "px";
+    },
+    //参数propLabel ， 值value
+    getField(propLabel, value) {
+      this.$set(this.ruleForm, propLabel, value);
+    },
+    setQueryShow(type) {
+      this.queryShow = type;
+    },
+    elDialogClick(row, index, indexRow) {
+      if (row.disabled) {
+        return;
+      }
+      this.$emit("elDialogClick", row, index);
+    },
+    elDialogClear(row) {
+      this.resetField(row.prop);
+      this.$emit("elDialogClear", row);
+    },
+    // 重置表单字段
+    resetField(field) {
+      if (this.ruleForm[field]) {
+        this.$set(this.ruleForm, field, "");
+      }
+    },
+    edit(item) {
+    },
+    del(item) {
     },
     pageClear() {
-      this.pageModel.page = 1;
+      this.pageModel.pageIndex = 1;
     },
     // importUpload() {
     // 	const timestamp = new Date().getTime() + '';
@@ -520,6 +439,7 @@ export default {
     handleError() {
       this.$vmNews("上传失败", "error");
     },
+    // 设置按钮
     // 自定义级联选择器返回值
     getCascader(value, field) {
       this.$set(this.model, field, value);
@@ -531,9 +451,9 @@ export default {
     setPageNum(pageNum) {
       this.$set(this.pageModel, "page", pageNum);
     },
-    //参数propLabel ， 值value
+    // 搜索按钮点击事件
-    getField(propLabel, value) {
+    funSearchBtnClick(item) {
-      this.$set(this.ruleForm, propLabel, value);
+      this.$emit("onFuncSearchBtn", item);
     },
     // 返回
     goBack() {
@@ -541,24 +461,30 @@ export default {
     },
     // 按钮点击事件
     funNewClick(item) {
-      if (item.menuName == "刷新" || item.btnFunction == "Refresh") {
+      if (item.menuName == "刷新") {
         this.$tab.refreshPage(this.$route);
       } else {
         this.$emit("onFuncBtn", item);
       }
     },
-    // 固定按钮点击事件
+    dropClick(item) {
-    fixedClick(item) {
+      this.$emit("dropClick", item);
-      this.$emit("onFixedBtn", item);
+    },
+    // 查询隐藏展示
+    queryShowChange() {
+      this.queryShow = !this.queryShow;
+      this.$nextTick(() => {
+        this.watchSize();
+      });
+      this.$emit("queryShowChange", this.queryShow);
     },
     // 操作按钮点击事件
     funcClick(btnItem) {
+      // console.log(btnItem,"btnItem")
       this.$emit("onFuncBtn", btnItem);
     },
     // 导出函数
     eventExport(params) {
-      // console.log(params, 'params')
-      // console.log(this.onlyUrl ? this.onlyUrl : this.exportUrl, 'this.onlyUrl?this.onlyUrl:this.exportUrl')
       // return fetch.get(this.onlyUrl ? this.onlyUrl : this.exportUrl, {
       // 	params,
       // 	responseType: 'blob'
@@ -572,22 +498,22 @@ export default {
     queryEvent(state) {
       this.$emit("onQuery", this.mergeParam(true));
     },
-    // 回车搜索
-    handerInputEnter() {
-      this.$emit("handerInputEnter", this.ruleForm);
-    },
     // 条件查询-下拉框
-    selectChange(event, index, indexItem) {
+    selectChange(event, index, indexItem, row) {
-      if (typeof event == "number" && event < 3) {
+      // if (typeof event == "number" && event < 3) {
-        if (Number(event) == 2) {
+      //   if (Number(event) == 2) {
-          event = 0;
+      //     event = 0;
-        } else {
+      //   } else {
-          event = event - 1;
+      //     event = event - 1;
-        }
+      //   }
-      }
+      // }
       if (event !== "" && event != undefined) {
-        this.$emit("onElSelect", event, index, indexItem, this.model);
+        this.$emit("onElSelect", event, index, indexItem, this.model, row);
       }
+    },
+    // 刷新
+    refresh() {
+
     },
     // 页数或每页条数更改时触发
     onPageChange() {
@@ -596,11 +522,11 @@ export default {
     // 合并参数
     mergeParam(state) {
       if (state) {
-        this.pageModel.page = 1;
+        this.pageModel.pageIndex = 1;
       }
       let page = {
-        page: this.pageModel.page,
+        pageIndex: this.pageModel.pageIndex,
-        limit: this.pageModel.limit,
+        pageSize: this.pageModel.pageSize,
       };
       for (let i in this.model) {
         if (!this.model[i]) {
@@ -614,41 +540,58 @@ export default {
     showSearch() {
       this.isSearch = !this.isSearch;
     },
-    // 查询函数
     search() {
       this.$emit("search", this.ruleForm);
     },
-    // 重置函数
     refresh() {
       this.ruleForm = Object.assign({}, "");
-      this.search();
+      this.$emit("onQuery", this.mergeParam(true));
+    },
+    testEnter() {
+      if (this.enterClickType) {
+        this.search();
+      }
     },
   },
 };
 </script>
 <style scoped lang='scss'>
-.pushButton {
+p {
-  /* margin: 12px 10px 10px 10px; */
+  margin: 0;
-  padding: 10px;
 }
 
 ::v-deep .iconfont {
   font-size: 12px;
-  text-align: center;
 }
 
-::v-deep .el-tooltip {
+.queryIcon {
-  padding: 0 3px;
+  font-size: 16px;
+  color: #606266;
+  margin-right: 16px;
+  cursor: pointer;
 }
 
-::v-deep .el-button--mini {
+.searchIcon {
-  padding: 6px 8px;
+  font-size: 18px;
-  margin: 5px;
+  /* padding: 0 12px; */
+  height: 32px;
+  /* line-height: 32px; */
+  margin-left: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.requirementList {
+  width: 160px;
+  height: 30px;
+  line-height: 30px;
 }
 
 .container {
   width: 100%;
   height: 100%;
+  overflow: auto;
 
   .title {
     /* @include boxBase(100%, 48px, $base-color); */
@@ -657,13 +600,16 @@ export default {
     padding: 12px;
   }
 
-  .buttonList + .buttonList {
+  .buttonList {}
-    margin-left: 5px;
+
+  .buttonList+.buttonList {
+    margin-left: 8px;
   }
 
   .main {
     /* height: auto !important; */
     overflow-y: auto;
+    flex-wrap: wrap;
 
     /* padding:0 12px; */
     .search {
@@ -672,6 +618,10 @@ export default {
       border: 1px solid #d8d8d8;
       padding: 12px;
       transition: all 0.2s ease-in-out;
+
+      .row {
+        /* @include fontBase(14px, #333) */
+      }
     }
 
     .hide {
@@ -702,4 +652,32 @@ export default {
     cursor: pointer;
   }
 }
+
+.elDialog {
+  display: flex;
+  /* width: calc(100% - 14px);1 */
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 0 15px;
+  cursor: pointer;
+  background-color: white;
+
+  i {
+    color: #c0c4cc;
+  }
+}
+
+.searchBox {
+  width: 200px;
+}
+
+.searchBox+.searchBox {
+  margin-left: 8px;
+}
+
+::v-deep.el-radio-button--medium .el-radio-button__inner {
+  padding: 8px !important;
+}
 </style>

src/components/base/baseNewLayout/index.vue

@@ -0,0 +1,705 @@
+<!--
+* @name: 页面基本结构组件
+* @author: zhangpengcheng
+* @date: 2022-08-23
+-->
+<!-- style="overflow: auto;" -->
+<template>
+  <div
+    class="container"
+    v-loading="loading"
+    :style="
+      'backgroundColor:' +
+      bgColor +
+      ';paddingBottom:' +
+      paddingBottom +
+      ';height:' +
+      bodyHight
+    "
+  >
+    <!-- 标题       -->
+    <div class="title" flex="cross:center" v-if="showTitle">
+      <span v-if="!$route.meta.back">{{ title }}</span>
+      <span @click="goBack" class="back" v-else
+      ><i class="el-icon-arrow-left"></i>返回</span
+      >
+    </div>
+
+    <!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
+    <div
+      class="main"
+      :style="{
+        height: showTitle ? 'calc(100% - 38px)' : '100%',
+        backgroundColor: mainColor,
+      }"
+    >
+      <!-- 操作按钮 -->
+      <div
+        class="pushButton"
+        flex="cross:centet main:right cross:center"
+        v-if="operateButtonSwitch"
+      >
+        <div class="operationButton" flex="cross:center">
+          <div v-if="defaultButtonSwitch" style="margin-right: 5px">
+            <el-button
+              v-for="(item, index) in defaultButtonList"
+              :type="item.type ? item.type : 'primary'"
+              size="small"
+              class="iconfont buttonList"
+              :icon="item.icon"
+              @click="funNewClick(item)"
+              :key="index"
+            >
+              {{ item.menuName }}
+            </el-button>
+          </div>
+          <slot name="btn"></slot>
+          <el-button
+            v-for="(item, index) in buttonList"
+            :type="item.type ? item.type : 'primary'"
+            size="small"
+            class="iconfont buttonList"
+            :icon="item.icon"
+            @click="funNewClick(item)"
+            :key="index"
+          >
+            <span v-if="item.menuName">{{ item.menuName }}</span>
+          </el-button>
+        </div>
+        <div v-if="fixedButton" style="margin-left: 5px">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="item.title"
+            placement="top"
+            v-for="(item, index) in fixedButtonList"
+            :key="index"
+            trigger="hover"
+          >
+            <span>
+              <el-button
+                size="mini"
+                :icon="item.icon"
+                @click.stop="fixedClick(item)"
+                style="margin: 0"
+              ></el-button>
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+      <!-- 搜索 -->
+      <div
+        v-show="querySwitch"
+        style="padding: 5px; background-color: #fff"
+        flex="cross:center"
+        ref="serchRefs"
+        class="searchForTable"
+      >
+        <div
+          v-for="(row, indexRow) in searchList"
+          class="searchBox"
+          :key="indexRow"
+          style="margin-right: 5px"
+        >
+          <el-input
+            v-model="ruleForm[row.columnNameEN]"
+            clearable
+            :type="row.type ? row.type : 'text'"
+            style="width: 100%"
+            :placeholder="!row.columnNameCN ? '请输入' : row.columnNameCN"
+            v-if="row.tag === 'elInput'"
+            min="1"
+            @keydown.enter.native="handerInputEnter()"
+          >
+          </el-input>
+          <el-date-picker
+            v-model="ruleForm[row.columnNameEN]"
+            v-if="row.tag === 'elDatePicker'"
+            :class="{ one: row.type ? 'date' : row.type }"
+            style="width: 100%"
+            :value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :type="!row.type ? 'date' : row.type"
+            :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
+          >
+          </el-date-picker>
+          <el-radio-group
+            v-model="ruleForm[row.columnNameEN]"
+            v-if="row.tag === 'elRadio'"
+          >
+            <el-radio-button
+              v-for="el in row.options"
+              :label="el.value"
+              :key="el.value"
+            >{{ el.label }}
+            </el-radio-button>
+          </el-radio-group>
+          <div
+            v-if="row.tag === 'elDialog'"
+            class="elDialog"
+            style="cursor: pointer; height: 32px; ine-height: 32px"
+          >
+            <p
+              :style="{
+                color: ruleForm[row.columnNameEN] ? '#000' : '#c0c4cc',
+              }"
+              style="width: 100%; margin: 0"
+              @click="elDialogClick(row, index, indexRow)"
+            >
+              {{
+                ruleForm[row.columnNameEN]
+                  ? ruleForm[row.columnNameEN]
+                  : row.columnNameCN
+                    ? row.columnNameCN
+                    : "请点击选择"
+              }}
+            </p>
+            <i
+              class="el-icon-more"
+              @click="elDialogClick(row, index, indexRow)"
+              v-if="!row.disabled && !ruleForm[row.columnNameEN]"
+            ></i>
+            <i
+              class="el-icon-circle-close"
+              v-if="!row.disabled && ruleForm[row.columnNameEN]"
+              @click="elDialogClear(row)"
+              style="margin-left: 10px"
+            ></i>
+          </div>
+          <el-select
+            v-model="ruleForm[row.columnNameEN]"
+            filterable
+            style="width: 100%"
+            @change="selectChange($event, indexRow)"
+            :clearable="row.clearable ? row.clearable : true"
+            :placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
+            v-if="row.tag === 'elSelect'"
+          >
+            <el-option
+              v-for="(el, elIndex) in row.options"
+              :key="!row.optionValue ? el['value'] : el[row.optionValue]"
+              :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
+              :value="!row.optionValue ? el['value'] : el[row.optionValue]"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 搜索按钮 -->
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-search searchIcon"
+          @click="search"
+          title="搜索"
+        >
+          搜索
+        </el-button>
+        <el-button
+          v-if="searchList.length > 1"
+          type="primary"
+          size="small"
+          icon="el-icon-refresh-left searchIcon"
+          class="searchIcon"
+          @click="refresh"
+          title="重置"
+        >重置
+        </el-button>
+        <slot name="searchBtn"></slot>
+      </div>
+      <div :style="'height:' + getMainHeight()" class="tableHeight">
+        <slot name="main" :tableHeight="tableHeight"></slot>
+      </div>
+      <!-- 主要内容  -->
+      <!-- 分页 -->
+      <base-page
+        v-if="isPage"
+        :pageModel.sync="pageModel"
+        @onPageChange="onPageChange"
+      ></base-page>
+    </div>
+  </div>
+</template>
+
+<script>
+// import heightTransition from '@/common/js/heightTransition'
+// import customCascader from "@/components/customCascader";
+import { exportDown, wordDown, zipDown } from "@/utils/util.js";
+import basePage from "@/components/base/basePage";
+import { TokenKeys } from "@/utils/variable";
+// import fetch from '../../api/request'
+import { getApiSign } from "@/utils/apiSign";
+// import domainsFuc from '@/api/domains.js'
+export default {
+  components: {
+    // heightTransition,
+    basePage,
+    // customCascader
+  },
+  props: {
+    // 是否展示标题
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+
+    // 标题
+    title: {
+      type: String,
+      default: "",
+    },
+
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: "#ffffff",
+    },
+    // 背景颜色
+    mainColor: {
+      type: String,
+      default: "",
+    },
+    // 底部padding
+    paddingBottom: {
+      type: String,
+      // default: '68px'
+    },
+    // 高度
+    bodyHight: {
+      type: [Number, String],
+      default: "100%",
+    },
+    // main高度
+    mainHight: {
+      type: [Number, String, Boolean],
+      default: "calc(100% - 38px)",
+    },
+    // 搜索配置
+    searchModel: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+
+    // 按钮配置
+    buttonList: {
+      type: Array,
+      default: () => {
+        return [];
+        // [{
+        // 	icon: 'el-icon-plus',
+        // 	menuName: '新增'
+        // }, {
+        // 	icon: 'el-icon-edit',
+        // 	menuName: '编辑'
+        // }, {
+        // 	icon: 'el-icon-delete',
+        // 	menuName: '删除',
+        // 	type: 'danger'
+        // }, {
+        // 	icon: 'el-icon-refresh',
+        // 	menuName: '刷新'
+        // },]
+      },
+    },
+    defaultButtonList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            icon: "el-icon-plus",
+            menuName: "新增",
+          },
+          {
+            icon: "el-icon-edit",
+            menuName: "编辑",
+          },
+          {
+            icon: "el-icon-delete",
+            menuName: "删除",
+            type: "danger",
+          },
+          // {
+          // 	icon: 'el-icon-refresh',
+          // 	menuName: '刷新'
+          // },
+        ];
+      },
+    },
+    // 是否展示分页
+    isPage: {
+      type: Boolean,
+      default: false,
+    },
+    // 导出接口地址
+    exportUrl: {
+      default: "",
+    },
+    // 导入接口地址
+    importUrl: {
+      default: "",
+    },
+    //单选
+    only: {
+      default: "",
+    },
+    // 左侧固定按钮
+    fixedButton: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示查询条件
+    querySwitch: {
+      type: Boolean,
+      default: false,
+    },
+    // 搜索列表
+    searchList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 操作按钮
+    operateButtonSwitch: {
+      type: Boolean,
+      default: true,
+    },
+    // 操作按钮
+    defaultButtonSwitch: {
+      type: Boolean,
+      default: true,
+    },
+    // 右侧按钮
+    fixedButtonList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            icon: "el-icon-s-operation",
+            title: "筛选",
+          },
+          {
+            icon: "el-icon-printer",
+            title: "打印",
+          },
+          {
+            icon: "el-icon-folder",
+            title: "导出",
+          },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      ruleForm: {},
+      onlyUrl: "",
+      clientHeight: "",
+      // 上传请求头
+      uploadHeaders: {},
+      // uurl: domainsFuc().domain,
+      uurl: "http://www.wldxt.cn:8089/taizhou/daxitong/crm/",
+      // 参数
+      model: {},
+      // 收起/展开搜索
+      isSearch: false,
+      // 分页数据
+      pageModel: {
+        total: 0,
+        page: 1,
+        limit: 20,
+      },
+      // 清除状态
+      clearState: 0,
+      loading: false,
+      // fixedButtonList: [{
+      // 	icon: 'el-icon-s-operation',
+      // 	title: '筛选'
+      // },
+      // {
+      // 	icon: 'el-icon-printer',
+      // 	title: '打印'
+      // },
+      // {
+      // 	icon: 'el-icon-folder',
+      // 	title: '导出'
+      // }
+      // ],
+      // defaultButtonList: [
+      // 	{
+      // 		icon: 'el-icon-plus',
+      // 		menuName: '新增'
+      // 	}, {
+      // 		icon: 'el-icon-edit',
+      // 		menuName: '编辑'
+      // 	}, {
+      // 		icon: 'el-icon-delete',
+      // 		menuName: '删除',
+      // 		type: 'danger'
+      // 	}, {
+      // 		icon: 'el-icon-refresh',
+      // 		menuName: '刷新'
+      // 	},
+      // ],
+      tableHeight: "100%",
+    };
+  },
+  created() {},
+  mounted() {
+    // this.getTableHight()
+    // window.onresize = () => {
+    // 	this.clientHeight = document.documentElement.clientHeight;
+    // },
+    // this.importUpload(); //初始化上传
+  },
+  computed: {
+    // menuJson() {
+    // 	return JSON.parse(localStorage.getItem(TokenKeys.MENU_JSON))
+    // }
+  },
+  methods: {
+    getTableHight() {
+      let height = "100%";
+      let heightReduce = 0;
+      if (this.operateButtonSwitch) {
+        heightReduce = heightReduce + 53;
+      }
+      if (this.querySwitch) {
+        heightReduce = heightReduce + 47;
+      }
+      if (this.isPage) {
+        heightReduce = heightReduce + 53;
+      }
+      height = "calc(100% - " + heightReduce + "px)";
+      this.tableHeight = height;
+    },
+    getMainHeight() {
+      // operateButtonSwitch 操作开关 querySwitch查询高 度
+      let height = "100%";
+      let heightReduce = 0;
+      if (this.operateButtonSwitch) {
+        heightReduce = heightReduce + 56;
+      }
+      if (this.querySwitch) {
+        heightReduce = heightReduce + 33;
+      }
+      if (this.isPage) {
+        heightReduce = heightReduce + 56;
+      }
+      height = "calc(100% - " + heightReduce + "px)";
+      // console.log(height, "height")
+      return height;
+    },
+    pageClear() {
+      this.pageModel.page = 1;
+    },
+    // importUpload() {
+    // 	const timestamp = new Date().getTime() + '';
+    // 	const sign = getApiSign(timestamp);
+    // 	this.uploadHeaders['timestamp'] = timestamp;
+    // 	this.uploadHeaders['appKey'] = TokenKeys.APP_KEY;
+    // 	this.uploadHeaders['sign'] = sign;
+    // 	this.uploadHeaders[TokenKeys.ACCESS_TOKEN] = localStorage.getItem(TokenKeys.ACCESS_TOKEN);
+    // },
+    handleSuccess(res) {
+      const { code, msg, data } = res;
+      if (code && code == 10000) {
+        this.loading = false;
+        this.$vmNews("上传成功", "success");
+      } else {
+        this.$vmNews(msg);
+        this.loading = false;
+      }
+    },
+    handleProgress() {
+      this.loading = true;
+    },
+    handleError() {
+      this.$vmNews("上传失败", "error");
+    },
+    // 自定义级联选择器返回值
+    getCascader(value, field) {
+      this.$set(this.model, field, value);
+    },
+    // 设置分页total值
+    setPageTotal(total) {
+      this.$set(this.pageModel, "total", total);
+    },
+    setPageNum(pageNum) {
+      this.$set(this.pageModel, "page", pageNum);
+    },
+    //参数propLabel ， 值value
+    getField(propLabel, value) {
+      this.$set(this.ruleForm, propLabel, value);
+    },
+    // 返回
+    goBack() {
+      this.$router.go(-1);
+    },
+    // 按钮点击事件
+    funNewClick(item) {
+      if (item.menuName == "刷新" || item.btnFunction == "Refresh") {
+        this.$tab.refreshPage(this.$route);
+      } else {
+        this.$emit("onFuncBtn", item);
+      }
+    },
+    // 固定按钮点击事件
+    fixedClick(item) {
+      this.$emit("onFixedBtn", item);
+    },
+    // 操作按钮点击事件
+    funcClick(btnItem) {
+      this.$emit("onFuncBtn", btnItem);
+    },
+    // 导出函数
+    eventExport(params) {
+      // console.log(params, 'params')
+      // console.log(this.onlyUrl ? this.onlyUrl : this.exportUrl, 'this.onlyUrl?this.onlyUrl:this.exportUrl')
+      // return fetch.get(this.onlyUrl ? this.onlyUrl : this.exportUrl, {
+      // 	params,
+      // 	responseType: 'blob'
+      // })
+    },
+    // 设置某个参数的值
+    setSomeParam(field, value = null) {
+      this.$set(this.model, field, value);
+    },
+    // 查询、重置事件
+    queryEvent(state) {
+      this.$emit("onQuery", this.mergeParam(true));
+    },
+    // 回车搜索
+    handerInputEnter() {
+      this.$emit("handerInputEnter", this.ruleForm);
+    },
+    // 条件查询-下拉框
+    selectChange(event, index, indexItem) {
+      if (typeof event == "number" && event < 3) {
+        if (Number(event) == 2) {
+          event = 0;
+        } else {
+          event = event - 1;
+        }
+      }
+      if (event !== "" && event != undefined) {
+        this.$emit("onElSelect", event, index, indexItem, this.model);
+      }
+    },
+    // 页数或每页条数更改时触发
+    onPageChange() {
+      this.$emit("pageChange", this.mergeParam());
+    },
+    // 合并参数
+    mergeParam(state) {
+      if (state) {
+        this.pageModel.page = 1;
+      }
+      let page = {
+        page: this.pageModel.page,
+        limit: this.pageModel.limit,
+      };
+      for (let i in this.model) {
+        if (!this.model[i]) {
+          this.model[i] = null;
+        }
+      }
+      let search = Object.assign({}, page, this.model);
+      return Object.assign({}, page, this.model);
+    },
+    // 收起展开分页
+    showSearch() {
+      this.isSearch = !this.isSearch;
+    },
+    // 查询函数
+    search() {
+      this.$emit("search", this.ruleForm);
+    },
+    // 重置函数
+    refresh() {
+      this.ruleForm = Object.assign({}, "");
+      this.search();
+    },
+  },
+};
+</script>
+<style scoped lang='scss'>
+.pushButton {
+  /* margin: 12px 10px 10px 10px; */
+  padding: 10px;
+}
+
+::v-deep .iconfont {
+  font-size: 12px;
+  text-align: center;
+}
+
+::v-deep .el-tooltip {
+  padding: 0 3px;
+}
+
+::v-deep .el-button--mini {
+  padding: 6px 8px;
+  margin: 5px;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+
+  .title {
+    /* @include boxBase(100%, 48px, $base-color); */
+    /* @include fontBase(16px, #fff); */
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  .buttonList + .buttonList {
+    margin-left: 5px;
+  }
+
+  .main {
+    /* height: auto !important; */
+    overflow-y: auto;
+
+    /* padding:0 12px; */
+    .search {
+      height: auto;
+      background: #f5f5f5;
+      border: 1px solid #d8d8d8;
+      padding: 12px;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .hide {
+      height: 0;
+    }
+  }
+
+  .main::-webkit-scrollbar {
+    width: 5px;
+    /* background-color: #D8D8D8; */
+  }
+
+  .main::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    width: 5px;
+    background: #b4bccc;
+  }
+
+  .w-100 {
+    width: 100%;
+  }
+
+  .mb-12 {
+    margin-bottom: 12px;
+  }
+
+  .back {
+    cursor: pointer;
+  }
+}
+</style>

src/layout/components/AppMain.vue

@@ -35,7 +35,7 @@ export default {
 
 <style lang="scss" scoped>
 .openSider {
-  width: calc(100% - 136px) !important;
+  width: calc(100% - 136px);
   margin-left: 136px;
 }
 .app-main {

src/layout/components/Navbar.vue

@@ -10,15 +10,16 @@
 
       <div flex>
         <tags-view  />
-<!--        -->
+
 <!--        <router-link :to="item.path" class="indexRouter" :style="{-->
-<!--				color: activePage == index ? '#1478f6' : ''}" v-for="(item,index) in lagerScreenMenuData" :key="index">-->
+<!--				color: activePage == index ? '#1478f6' : ''}" v-for="(item,index) in lagerScreenMenuData" :key="index"-->
-<!--        <div @click="handlerClick(item,index)" flex>-->
+<!--        >-->
+<!--          <div @click="handlerClick(item,index)" flex>-->
 <!--            <i :class="item.meta.menuIcon"></i>-->
-<!--            <p>{{item.meta.title}}</p>-->
+<!--            <p>{{ item.meta.title }}</p>-->
-<!--        </div>-->
+<!--          </div>-->
 <!--        </router-link>-->
-<!--        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />-->
+<!--        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
       </div>
       <el-dropdown class="avatar-container right-menu-item hover-effect" style="display:flex;">
         <!-- trigger="click" -->

src/layout/components/TagsView/index.vue

@@ -267,8 +267,8 @@ export default {
 	border-radius: 4px;
 	// border-bottom: 1px solid #d8dce5;
 	// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-	position: fixed;
+	//position: fixed;
-	top: 22px;
+	//top: 22px;
 	// margin-top: 60px;
 	z-index: 1000;
 

src/layout/index.vue

@@ -1,17 +1,30 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <div
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    :class="classObj"
+    class="app-wrapper"
+    :style="{ '--current-color': theme }"
+  >
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
       <div :class="{ 'fixed-header': fixedHeader }">
-<!--        <tags-view v-if="needTagsView" />-->
         <navbar />
-        <sidebar ref="sidebar" class="sidebar-container" v-if="true" :style="{
+        <sidebar
+          ref="sidebar"
+          class="sidebar-container"
+          v-if="true"
+          :style="{
             width: sidebar.opened
               ? '0px'
               : childrenType
               ? childrenWidth
               : '128px',
-          }" @openChildren="openChildren" @changeWidth="changeWidth" />
+          }"
-
+          @openChildren="openChildren"
+          @changeWidth="changeWidth"
+        />
+        <!-- <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
       <right-panel>
@@ -22,182 +35,165 @@
 </template>
 
 <script>
-  import router from "@/router";
+import router from "@/router";
-  import RightPanel from "@/components/RightPanel";
+import RightPanel from "@/components/RightPanel";
-  import notFound from "@/views/error/404";
+import notFound from "@/views/error/404";
-  import {
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
+import { mapState } from "vuex";
+import variables from "@/assets/styles/variables.scss";
+
+export default {
+  name: "Layout",
+  components: {
     AppMain,
     Navbar,
+    RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
-  } from "./components";
+    notFound,
-  import ResizeMixin from "./mixin/ResizeHandler";
+  },
-  import {
+  mixins: [ResizeMixin],
-    mapState
+  computed: {
-  } from "vuex";
+    ...mapState({
-  import variables from "@/assets/styles/variables.scss";
+      theme: (state) => state.settings.theme,
-
+      sideTheme: (state) => state.settings.sideTheme,
-  export default {
+      sidebar: (state) => state.app.sidebar,
-    name: "Layout",
+      device: (state) => state.app.device,
-    components: {
+      notFound: (state) => state.app.notFound,
-      AppMain,
+      conciseMenu: (state) => state.settings.conciseMenu,
-      Navbar,
+      needTagsView: (state) => state.settings.tagsView,
-      RightPanel,
+      fixedHeader: (state) => state.settings.fixedHeader,
-      Settings,
+    }),
-      Sidebar,
+    classObj() {
-      TagsView,
-      notFound,
-    },
-    mixins: [ResizeMixin],
-    computed: {
-      ...mapState({
-        theme: (state) => state.settings.theme,
-        sideTheme: (state) => state.settings.sideTheme,
-        sidebar: (state) => state.app.sidebar,
-        device: (state) => state.app.device,
-        notFound: (state) => state.app.notFound,
-        conciseMenu: (state) => state.settings.conciseMenu,
-        needTagsView: (state) => state.settings.tagsView,
-        fixedHeader: (state) => state.settings.fixedHeader,
-      }),
-      classObj() {
-        return {
-          // hideSidebar: !this.sidebar.opened,
-          openSidebar: this.sidebar.opened,
-          withoutAnimation: this.sidebar.withoutAnimation,
-          mobile: this.device === "mobile",
-        };
-      },
-      variables() {
-        return variables;
-      },
-    },
-    data() {
       return {
-        childrenType: false,
+        // hideSidebar: !this.sidebar.opened,
-        childrenWidth: "1200px",
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === "mobile",
       };
     },
-    watch: {
+    variables() {
-      sidebar: {
+      return variables;
-        handler: function (val, oldVal) {
-          console.log(val,this.childrenType);
-
-          if (!val.opened && this.childrenType) {
-            this.$nextTick(() => {
-              let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
-              this.childrenWidth = newWidth;
-            });
-          }
-        },
-        deep: true,
-      },
     },
-    mounted() {
+  },
-      this.getMenu();
+  data() {
-      this.childrenWidth = this.$refs.sidebar.childrenWidth;
+    return {
-      // console.log(this.childrenWidth )
+      childrenType: false,
+      childrenWidth: "1200px",
+    };
+  },
+  watch: {
+    sidebar: {
+      handler: function (val, oldVal) {
+        if (!val.opened && this.childrenType) {
+          this.$nextTick(() => {
+            let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
+            this.childrenWidth = newWidth;
+          });
+        }
+      },
+      deep: true,
     },
-    methods: {
+  },
-      openChildren(val) {
+  mounted() {
-        let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
+    this.getMenu();
-        this.childrenWidth = newWidth;
+    this.childrenWidth = this.$refs.sidebar.childrenWidth;
-        this.childrenType = val;
+    // console.log(this.childrenWidth )
-      },
+  },
-      changeWidth(width) {
+  methods: {
-        this.childrenWidth = width + 128 + "px";
+    openChildren(val) {
-      },
+      let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
-      handleClickOutside() {
+      this.childrenWidth = newWidth;
-        this.$store.dispatch("app/closeSideBar", {
+      this.childrenType = val;
-          withoutAnimation: false,
-        });
-      },
-      getMenu() {
-        //动态路由注释
-        // this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
-        //   // console.log(accessRoutes)
-        //   // 根据roles权限生成可访问的路由表
-        //   for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
-        //     const element = accessRoutes[i];
-        //     router.addRoutes(accessRoutes); // 动态添加可访问路由表
-        //   }
-        //   localStorage.setItem("routeList", JSON.stringify(accessRoutes));
-        // });
-      },
     },
-  };
+    changeWidth(width) {
-
+      this.childrenWidth = width + 128 + "px";
+    },
+    handleClickOutside() {
+      this.$store.dispatch("app/closeSideBar", {
+        withoutAnimation: false,
+      });
+    },
+    getMenu() {
+      //动态路由注释
+      // this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+      //   // console.log(accessRoutes)
+      //   // 根据roles权限生成可访问的路由表
+      //   for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
+      //     const element = accessRoutes[i];
+      //     router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      //   }
+      //   localStorage.setItem("routeList", JSON.stringify(accessRoutes));
+      // });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+@import "~@/assets/styles/variables.scss";
 
-  .app-wrapper {
+.app-wrapper {
-    @include clearfix;
+  @include clearfix;
-    position: relative;
+  position: relative;
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
-    padding: 0 8px;
+  padding: 0 8px;
-    background: #fafafa;
+  background: #fafafa;
-
+  &.mobile.openSidebar {
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .defaultMuneStyle {
-    width: calc(100% - 160px);
-    margin-left: 160px;
-    height: 100%;
-    // padding:10px;
-  }
-
-  .conciseMenuStyle {
-    width: calc(100% - 70px);
-    margin-left: 70px;
-    padding: 10px;
-    height: 100%;
-  }
-
-  .fixed-header {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  // .hideSidebar .fixed-header {
+.drawer-bg {
-  // 	width: calc(100% - 54px);
+  background: #000;
-  // }
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+.defaultMuneStyle {
+  width: calc(100% - 160px);
+  margin-left: 160px;
+  height: 100%;
+  // padding:10px;
+}
+.conciseMenuStyle {
+  width: calc(100% - 70px);
+  margin-left: 70px;
+  padding: 10px;
+  height: 100%;
+}
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .sidebarHide .fixed-header {
+// .hideSidebar .fixed-header {
-    width: 100%;
+// 	width: calc(100% - 54px);
-  }
+// }
 
-  .mobile .fixed-header {
+.sidebarHide .fixed-header {
-    width: 100%;
+  width: 100%;
-  }
+}
-
-  .webConcat {
-    position: fixed;
-    top: 50px;
-    height: calc(100vh - 50px);
-    width: 100%;
-  }
 
+.mobile .fixed-header {
+  width: 100%;
+}
+.webConcat {
+  position: fixed;
+  top: 50px;
+  height: calc(100vh - 50px);
+  width: 100%;
+}
 </style>

src/views/applicationList/applicationAdd.vue

@@ -20,7 +20,7 @@
             <el-upload class="avatar-uploader" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-progress="handleProgress" :before-upload="beforeUpload" list-type="picture" :limit="1" :disabled="lookFlag" :on-success="handleAvatarSuccess" :show-file-list="false">
               <div class="line">
                 <div class="left">
-                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar" @error="handleImageError">
                   <!-- <el-image style="width: 64px; height: 64px" :src="iconBase64" fit="cover" alt="点击上传">
                     <template v-slot:error>
                       <div style="line-height: 64px; font-size: 12px">
@@ -76,6 +76,9 @@ export default {
     };
   },
   methods: {
+    handleImageError(row) {
+      this.imgUrl = require('./images/1.png')
+    },
     // 文件上传相关时间
     handleProgress(file, fileList) {
       this.loading = true
@@ -306,9 +309,12 @@ export default {
               border: 1px dashed #999999;
               width: 64px;
               height: 64px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
               > img {
                 width: 100%;
-                height: 100%;
+                // height: 100%;
               }
             }
             .right {

src/views/applicationList/index.vue

@@ -48,7 +48,7 @@
                 <img src="./images/5.png" alt="" />
               </template> -->
               <template>
-                <img :src="row.imgUrl" alt="" />
+                <img :src="row.imgUrl" alt="" @error="handleImageError(row)"/>
               </template>
             </div>
             <div class="nameInfo">
@@ -136,6 +136,9 @@ export default {
     };
   },
   methods: {
+    handleImageError(row) {
+      row.imgUrl = require('./images/1.png')
+    },
     // 状态改变
     async appStatusChange(val, row) {
       const res = await getApiModuleApi({
@@ -322,10 +325,13 @@ export default {
       flex: 0.25;
       width: 29px;
       height: 29px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
       img {
         width: 100%;
-        height: 100%;
+        // height: 100%;
       }
     }
 

src/views/applicationList/settingMenu.vue

@@ -16,10 +16,10 @@
             <img src="./images/4.png" alt="" style="width: 64px; height: 64px"/>
           </template>
           <template v-else-if="name==='ERP'">
-            <img src="./images/5.png" alt="" style="width: 64px; height: 64px"/>
+            <img src="./images/5.png" alt="" />
           </template> -->
           <template>
-            <img :src="imgUrl" alt="" style="width: 64px; height: 64px"/>
+            <img :src="imgUrl" alt="" @error="handleImageError" style="width: 64px;"/>
           </template>
         </div>
         <div class="appName">{{ name }}</div>
@@ -62,6 +62,9 @@ export default {
     };
   },
   methods: {
+    handleImageError(row) {
+      this.imgUrl = require('./images/1.png')
+    },
     flashActive(val) {
       this.menuActived = val
     },
@@ -137,6 +140,9 @@ export default {
       > .img {
         width: 64px;
         height: 64px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
       .appName {

src/views/intergrationOptionScene/index.vue

@@ -304,7 +304,7 @@ export default {
       this.searchForm = {};
     },
     newPage() {
-      this.$router.push({ name: "sceneAdd" });
+      this.$router.push({ path: "/add" });
     },
     homeHandleNodeClick(data) {
       this.pageModel.pageIndex = 1;
@@ -419,4 +419,4 @@ export default {
     margin-top: 10px;
   }
 }
-</style>
+</style>

src/views/intergrationOptionScene/sceneAdd.vue

@@ -901,6 +901,8 @@ export default {
             type: "success",
             message: "保存成功！",
           });
+          //面包屑删除
+          this.$store.dispatch("tagsView/delView", this.$route);
           this.$router.back();
         }
       } catch (error) {

src/views/intergrationTask/taskAdd.vue

@@ -757,6 +757,8 @@ export default {
             message: "保存成功！",
           });
           this.$router.back();
+          //面包屑删除
+          this.$store.dispatch("tagsView/delView", this.$route);
         }
       } else {
         obj["id"] = this.$route.query.id;

src/views/systemInit/index.vue

@@ -123,6 +123,7 @@ export default {
 	},
 	methods: {
 		baseLogin() {
+
 			if (this.loginForm.baseLoginCode == configKey.baseLoginCode && this.loginForm.baseLoginPwd == configKey.baseLoginPwd) {
 				this.loginType = true
 				this.dialogVisible = false

src/views/systemMaintenance/buttonManagement/index.vue

@@ -45,7 +45,7 @@
 
 <script>
 import baseTable from '@/components/base/baseTable'
-import baseLayout from '@/components/base/baseLayout'
+import baseLayout from "@/components/base/baseNewLayout"
 import baseDialog from '@/components/base/BaseNewDialog/index.vue'
 import baseTree from '@/components/base/BaseMenuTree/index.vue'
 import baseForm from '@/components/base/baseNewForm/index.vue'

src/views/systemMaintenance/menuManagement/index.vue

@@ -29,7 +29,7 @@
 
 <script>
 import router from '@/router'
-import baseLayout from "@/components/base/baseLayout"
+import baseLayout from "@/components/base/baseNewLayout"
 import baseForm from "@/components/base/baseNewForm/index.vue"
 import baseTree from "@/components/base/BaseMenuTree/index.vue"
 import baseTreeclick from "@/components/base/baseTreeClick/index.vue"

src/views/systemSettings/jurisdictionManage/roleJurisdiction/index.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import baseLayout from "@/components/base/baseLayout";
+import baseLayout from "@/components/base/baseNewLayout"
 import baseTable from "@/components/base/baseTable";
 import baseDialog from "@/components/base/BaseNewDialog/index.vue";
 import baseForm from "@/components/base/baseNewForm/index.vue";

src/views/systemSettings/jurisdictionManage/roleJurisdiction/jurisdictionSetting.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import baseLayout from "@/components/base/baseLayout";
+import baseLayout from "@/components/base/baseNewLayout"
 import baseTable from "@/components/base/baseTable";
 import baseTree from "@/components/base/BaseMenuTree/index.vue";
 import configData from "./configData";

src/views/systemSettings/jurisdictionManage/userJurisdiction/index.vue

@@ -49,7 +49,7 @@
 
 <script>
 import router from '@/router'
-import baseLayout from '@/components/base/baseLayout'
+import baseLayout from "@/components/base/baseNewLayout"
 import baseTable from '@/components/base/baseTable'
 import baseDialog from '@/components/base/BaseNewDialog/index.vue'
 import baseForm from '@/components/base/baseNewForm/index.vue'

src/views/systemSettings/jurisdictionManage/userJurisdiction/jurisdictionSetting.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import baseLayout from "@/components/base/baseLayout";
+import baseLayout from "@/components/base/baseNewLayout"
 import baseTable from "@/components/base/baseTable";
 import baseTree from "@/components/base/BaseMenuTree/index.vue";
 import configData from "./configData";

src/views/systemSettings/jurisdictionManage/userJurisdiction/rightDialog.vue

@@ -180,7 +180,56 @@ export default {
       })
     },
     handleSelectionChange(val, row) {
-      row.check = !row.check
+      this.multipleSelection = val
+      let data = this.treeToArray([row])
+      this.childNode = !row.check
+      console.log(this.childNode,'this.childNode')
+      if (data.length > 1) {
+        console.log(data,'data')
+        data.forEach((el, index) => {
+          el.check = this.childNode
+          this.$refs.multipleTable.toggleRowSelection(el, this.childNode)
+        })
+        let ids = data[0].id
+        let arr = this.treeFindPath(
+          this.menuDatas,
+          (data) => data.id == ids,
+          'id'
+        )
+        arr = arr.splice(0, arr.length - 1)
+        let dataList = []
+        let allList = this.treeToArray(this.menuDatas)
+        allList.forEach((el, index) => {
+          if (arr.includes(el.id)) {
+            dataList.push(el)
+          }
+        })
+        dataList.forEach((el, index) => {
+          el.check = true
+          this.$refs.multipleTable.toggleRowSelection(el, true)
+        })
+      } else {
+        let ids = data[0].id
+        let arr = this.treeFindPath(
+          this.menuDatas,
+          (data) => data.id == ids,
+          'id'
+        )
+        console.log(arr,'arr')
+        // arr = arr.splice(0, arr.length - 1)
+        let dataList = []
+        let allList = this.treeToArray(this.menuDatas)
+        allList.forEach((el, index) => {
+          if (arr.includes(el.id)) {
+            dataList.push(el)
+          }
+        })
+        console.log(dataList,'dataList')
+        dataList.forEach((el, index) => {
+          el.check = this.childNode
+          this.$refs.multipleTable.toggleRowSelection(el, this.childNode )
+        })
+      }
     },
     // 默认选中
     exhibitList(menu, homeList, id) {
@@ -239,13 +288,13 @@ export default {
       }
       this.homeListHandle(params.sysPopedomHomeEntities)
       this.menuListHandle(this.menuDatas, params.sysPopedomMenuEntities, params.sysPopedomOperateEntities)
-      const res = await authApi("sysUserService","","saveJurisdiction","",params)
+      const res = await authApi('sysUserService', '', 'saveJurisdiction', '', params)
-      if(res.status == '200'){
+      if (res.status == '200') {
-        this.handleDialogClose();
+        this.handleDialogClose()
         this.$message({
-          message: "保存成功",
+          message: '保存成功',
-          type: "success",
+          type: 'success'
-        });
+        })
       }
     },
     //处理首页拖拽
@@ -265,7 +314,7 @@ export default {
           })
         }
         if (item.children.length) {
-          this.menuListHandle(item.children, result,btnResult)
+          this.menuListHandle(item.children, result, btnResult)
         }
         if (item.buttonList.length) {
           this.btnListHandle(item.buttonList, btnResult, item.id)
@@ -276,7 +325,7 @@ export default {
     btnListHandle(list, btnResult, menuId) {
       list.forEach(item => {
         if (item.check) {
-          console.log(btnResult,'btnResult')
+          console.log(btnResult, 'btnResult')
           btnResult.push({
             menuId,
             operate: item.id

src/views/systemSettings/organization/index.vue

@@ -31,7 +31,7 @@
 
 <script>
 import { authApi } from "@/api/apis/auth";
-import baseLayout from "@/components/base/baseLayout";
+import baseLayout from "@/components/base/baseNewLayout"
 import baseTable from "@/components/base/baseTable";
 import baseForm from "@/components/base/baseNewForm/index.vue";
 import baseDialog from "@/components/base/BaseNewDialog/index.vue";

src/views/systemSettings/userSettings/PersonnelSettings/index.vue

@@ -75,7 +75,7 @@
 </template>
 
 <script>
-import baseLayout from '@/components/base/baseLayout'
+import baseLayout from "@/components/base/baseNewLayout"
 import baseTable from '@/components/base/baseTable'
 // import baseDialog from "@/components/base/BaseNewDialog";
 import baseDialog from '@/components/base/BaseNewDialog/index.vue'

src/views/systemSettings/userSettings/roleSettings/index.vue

@@ -51,7 +51,7 @@
 
 <script>
 import baseRightDialog from "@/components/base/baseRightDialog";
-import baseLayout from "@/components/base/baseLayout";
+import baseLayout from "@/components/base/baseNewLayout"
 import BaseTable from '@/components/base/baseTable/index.vue'
 import baseDialog from "@/components/base/BaseNewDialog/index.vue";
 import BaseSelect from '@/components/base/BaseSelect'

src/views/systemSettings/userSettings/userInformation/index.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import baseLayout from '@/components/base/baseLayout'
+import baseLayout from "@/components/base/baseNewLayout"
 import baseTable from '@/components/base/baseTable'
 // import baseDialog from "@/components/base/BaseNewDialog";
 import baseDialog from '@/components/base/BaseNewDialog/index.vue'