先存一下

src/apis/service/serviceParam/supplierAccount/index.js

@@ -9,7 +9,7 @@ export default {
   // 删除
   delete: (data, params) => http(api + "supplerdelete", data, "post", params),
   // 分页查询
-  list: (data, params) => http(api + "geAccounttList", data, "post", params),
+  list: (data, params) => http(api + "getAccountList", data, "post", params),
   // 更新
   update: (data, params) => http(api + "editAccount", data, "post", params),
   // 修改状态

src/apis/service/serviceParam/supplierBrand/index.js

@@ -0,0 +1,20 @@
+// 物业管理员
+import http from "@/apis/axios";
+const api = "admin/";
+export default {
+  // 分页查询供应商
+  slist: (data, params) => http(api + "supplerlist", data, "post", params),
+
+  // 添加
+  add: (data, params) => http(api + "keepbcreate", data, "post", params),
+  // 删除
+  delete: (data, params) => http(api + "keepbdelete", data, "post", params),
+  // 分页查询
+  list: (data, params) => http(api + "keepblist", data, "post", params),
+  // 修改状态
+  status: (data, params) => http(api + "keepbstatus", data, "post", params),
+  // 详情
+  detail: (data, params) => http(api + "keepbinfo", data, "post", params),
+  // 更新
+  update: (data, params) => http(api + "keepbedit", data, "post", params),
+};

src/views/serviceParam/supplier/components/show-brand-list/index.vue

@@ -1,372 +0,0 @@
-<template>
-  <el-dialog
-    :title="'支持品牌列表'"
-    :center="true"
-    align="left"
-    top="8vh"
-    width="1040px"
-    @close="showModelThis = false"
-    :close-on-click-modal="false"
-    :visible.sync="showModelThis"
-    v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    append-to-body
-  >
-    <el-card style="margin-top: -20px" class="modal-form-style">
-      <ex-table
-        v-loading="loading"
-        :table="table"
-        :data="tableData"
-        :columns="columns"
-        :page="pageInfo"
-        :size="size"
-        @page-curr-change="handlePageChange"
-        @page-size-change="handleSizeChange"
-        @screen-reset="
-          pageInfo.curr = 1;
-          parmValue.page = 1;
-          searchList();
-        "
-        @screen-submit="
-          pageInfo.curr = 1;
-          parmValue.page = 1;
-          searchList();
-        "
-      >
-        <template #table-header="{}">
-          <div style="margin: -10px 0 10px 0; width: 100%" class="tr">
-            <div v-if="modelSitem" class="fl" style="height: 28px; line-height: 28px">
-              <span>供应商：</span>{{ modelSitem.name }}
-            </div>
-            <el-button
-              type="primary"
-              style="margin: 0 0 0 10px"
-              :size="searchSize"
-              @click="searchList"
-            >
-              刷新
-            </el-button>
-
-            <el-button
-              type="warning"
-              style="margin: 0 0 0 10px"
-              :size="searchSize"
-              @click="restSearch"
-            >
-              重置
-            </el-button>
-            <el-button
-              v-if="powers.some((i) => i == '073')"
-              type="success"
-              style="margin: 0 0 0 10px"
-              :size="searchSize"
-              @click="openCostEdit(-1, 'add')"
-            >
-              添加
-            </el-button>
-          </div>
-        </template>
-        <template #brand_book="{ scope }">
-          <div
-            v-if="scope.row.brand_book"
-            style="width: 20px; height: 20px"
-            class="hover"
-            v-viewer
-          >
-            <img
-              :src="scope.row.brand_book"
-              style="display: inline-block; width: 100%; height: 100%"
-              alt=""
-            />
-          </div>
-        </template>
-        <template #long="{ scope }">
-          <el-tag
-            :size="tablebtnSize"
-            :type="scope.row.long == '1' ? 'warning' : ''"
-            v-text="
-              (options1.find((item) => item.id == scope.row.long) || {}).name || '--'
-            "
-          ></el-tag>
-        </template>
-        <template #longTime="{ scope }">
-          {{ scope.row.starttime }}~{{ scope.row.endtime }}
-        </template>
-        <template #status="{ scope }">
-          <el-tag
-            :size="tablebtnSize"
-            :type="scope.row.status == '0' ? 'warning' : ''"
-            v-text="
-              (options2.find((item) => item.id == scope.row.status) || {}).name || '--'
-            "
-          ></el-tag>
-        </template>
-        <template #operation="{ scope }">
-          <el-tooltip
-            effect="dark"
-            content="查看"
-            v-if="powers.some((i) => i == '074') && scope.row.status === '0'"
-            placement="top"
-          >
-            <i
-              class="el-icon-view tb-icon"
-              @click="openCostEdit(scope.row.id, 'view')"
-            ></i>
-          </el-tooltip>
-          <el-tooltip
-            effect="dark"
-            content="修改"
-            v-if="powers.some((i) => i == '075') && scope.row.status === '0'"
-            placement="top"
-          >
-            <i
-              class="el-icon-edit tb-icon"
-              @click="openCostEdit(scope.row.id, 'edit')"
-            ></i> </el-tooltip
-          ><el-tooltip
-            v-if="powers.some((i) => i == '076') && scope.row.status === '1'"
-            effect="dark"
-            content="禁用"
-            placement="top"
-          >
-            <i
-              class="el-icon-video-pause tb-icon"
-              @click="changeStatus(scope.row.id, scope.row.status)"
-            ></i>
-          </el-tooltip>
-          <el-tooltip
-            v-if="powers.some((i) => i == '076') && scope.row.status === '0'"
-            effect="dark"
-            content="启用"
-            placement="top"
-          >
-            <i
-              class="el-icon-video-play tb-icon"
-              @click="changeStatus(scope.row.id, scope.row.status)"
-            ></i> </el-tooltip
-          ><el-tooltip
-            effect="dark"
-            content="删除"
-            placement="top"
-            v-if="powers.some((i) => i == '077') && scope.row.status === '0'"
-          >
-            <i class="el-icon-delete tb-icon" @click="deleteItem(scope.row.id)"></i>
-          </el-tooltip>
-        </template>
-      </ex-table>
-      <add-edit
-        :id="modelId"
-        :type="modelType"
-        :sitem="modelSitem"
-        :showModel="costshowModel"
-        :code="code"
-        @cancel="costshowModel = false"
-        @refresh="(costshowModel = false), searchList()"
-      />
-    </el-card>
-  </el-dialog>
-</template>
-
-<script>
-import asyncRequest from "@/apis/service/serviceParam/supplier";
-import resToken from "@/mixins/resToken";
-import mixinPage from "@/mixins/elPaginationHandle";
-import addEdit from "../addEdit";
-import columns from "./columns";
-import { mapGetters } from "vuex";
-export default {
-  name: "searchGoodModal",
-  mixins: [resToken, mixinPage],
-  components: {
-    addEdit,
-  },
-  computed: {
-    //组件SIZE设置
-    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
-    powers() {
-      const tran =
-        this.$store.getters.btnList.find((item) => item.menu_route == "supplier") || {};
-      const { action } = tran ?? {};
-      return action ?? [];
-    },
-  },
-  props: ["showModel", "sitem"],
-
-  /**
-   * 属性集合
-   * @param {Boolean}       showModel             : 是否弹出弹窗        必填
-   * @param {Boolean}       once                  : 是否只选一条        非必填
-   */
-  /**
-   * 事件集合
-   * @resultList             : 选中值变化调用   抛出选中数据
-   */
-  data() {
-    return {
-      options1: [
-        { id: "0", name: "长期" },
-        { id: "1", name: "非长期" },
-      ],
-      options2: [
-        { id: "0", name: "禁用" },
-        { id: "1", name: "启用" },
-      ],
-      costshowModel: false,
-      modelSitem: null,
-      modelId: "",
-      modelType: "",
-      selectLoading: false,
-      loading: true,
-      showModelThis: false,
-      parmValue: {
-        gyscode: "", // 供应商code
-        page: 1, // 页码
-        size: 15, // 每页显示条数
-      },
-      tableData: [],
-      passwordModel: false,
-      passwordModelId: 0,
-      isPasswordDetail: false,
-      // 表格 - 数据
-      tableData: [],
-      // 表格 - 参数
-      table: {
-        stripe: true,
-        border: true,
-        // _defaultHeader_: ["setcol"],
-      },
-      // 表格 - 分页
-      pageInfo: {
-        size: 15,
-        curr: 1,
-        total: 0,
-      },
-      // 表格 - 列参数
-      columns: columns,
-    };
-  },
-  watch: {
-    showModel: function (val) {
-      this.showModelThis = val;
-      if (val) {
-        this.initd();
-      }
-    },
-    showModelThis(val) {
-      if (!val) {
-        this.$emit("cancel");
-      }
-    },
-  },
-
-  methods: {
-    async initd() {
-      this.modelSitem = JSON.parse(JSON.stringify(this.sitem));
-      console.log(this.modelSitem);
-      await this.restSearch();
-    },
-    async restSearch() {
-      this.parmValue = {
-        gyscode: this.code, // 供应商code
-        page: 1, // 页码
-        size: 15, // 每页显示条数
-      };
-      // 表格 - 分页
-      this.pageInfo = {
-        size: 15,
-        curr: 1,
-        total: 0,
-      };
-      await this.searchList();
-    },
-    async searchList() {
-      this.loading = true;
-      this.parmValue.gyscode = this.modelSitem.code;
-      const res = await asyncRequest.klist(this.parmValue);
-      if (res && res.code === 0 && res.data) {
-        this.tableData = res.data.list;
-        this.pageInfo.total = Number(res.data.count);
-      } else if (res && res.code >= 100 && res.code <= 104) {
-        await this.logout();
-      } else {
-        this.tableData = [];
-        this.pageInfo.total = 0;
-      }
-      this.loading = false;
-    },
-    //新建/编辑/查看
-    openCostEdit(id, type) {
-      this.modelId = id;
-      this.modelType = type;
-      this.costshowModel = true;
-    },
-    /**
-     * 启用/禁用
-     * @param {String} id id
-     * @param {String} status 0-禁用 1-启用
-     */
-    async changeStatus(id, status) {
-      await this.$confirm(`确定要改为${status === "1" ? "禁用" : "启用"}？`, {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          this.loading = true;
-          const model = {
-            id: id,
-            status: status === "1" ? "0" : "1",
-          };
-          const res = await asyncRequest.kstatus(model);
-          if (res && res.code === 0) {
-            this.loading = false;
-            this.$notify.success({
-              title: "状态修改成功！",
-              message: "",
-            });
-            await this.searchList();
-          } else if (res && res.code >= 100 && res.code <= 104) {
-            await this.logout();
-          } else {
-            this.loading = false;
-            this.$message.warning(res.message);
-          }
-        })
-        .catch(() => {
-          console.log("取消");
-        });
-    },
-    async deleteItem(id) {
-      await this.$confirm("确定要删除？", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const model = {
-            id: id,
-          };
-          const res = await asyncRequest.kdelete(model);
-          if (res && res.code === 0) {
-            this.$notify.success({
-              title: "删除成功",
-              message: "",
-            });
-            this.searchList();
-          } else if (res && res.code >= 100 && res.code <= 104) {
-            await this.logout();
-          } else {
-            this.$message.warning(res.message);
-          }
-        })
-        .catch(() => {
-          console.log("取消");
-        });
-    },
-  },
-};
-</script>
-
-<style></style>

src/views/serviceParam/supplier/index.vue

@@ -2,7 +2,7 @@
   <div class="supplier pagePadding">
     <ex-table
       v-loading="loading"
-      v-if=" powers.some((i) => i == '001')"
+      v-if="powers.some((i) => i == '001')"
       :table="table"
       :data="tableData"
       :columns="columns"
@@ -79,20 +79,12 @@
               </el-select>
             </el-col>
 
-            <el-col
-              :span="3"
-              class="fr"
-              style="width: 66px; padding: 0 0 0 10px"
-            >
+            <el-col :span="3" class="fr" style="width: 66px; padding: 0 0 0 10px">
               <el-button type="primary" :size="searchSize" @click="searchList">
                 刷新
               </el-button>
             </el-col>
-            <el-col
-              :span="3"
-              class="fr"
-              style="width: 66px; padding: 0 0 0 10px"
-            >
+            <el-col :span="3" class="fr" style="width: 66px; padding: 0 0 0 10px">
               <el-button type="warning" :size="searchSize" @click="restSearch">
                 重置
               </el-button>
@@ -174,8 +166,8 @@
           :size="tablebtnSize"
           :type="scope.row.status == '0' ? 'warning' : ''"
           v-text="
-            (statusOptions.find((item) => item.id == scope.row.status) || {})
-              .label || '--'
+            (statusOptions.find((item) => item.id == scope.row.status) || {}).label ||
+            '--'
           "
         ></el-tag>
       </template>
@@ -192,8 +184,8 @@
               : ''
           "
           v-text="
-            (ocr_status.find((item) => item.id == scope.row.ocr_status) || {})
-              .label || '--'
+            (ocr_status.find((item) => item.id == scope.row.ocr_status) || {}).label ||
+            '--'
           "
         ></el-tag>
       </template>
@@ -207,8 +199,7 @@
         >
           <i
             class="el-icon-view tb-icon"
-            
-             @click="getRouter('supplierDetail', scope.row.code )"
+            @click="getRouter('supplierDetail', scope.row.code)"
           ></i>
         </el-tooltip>
         <el-tooltip
@@ -217,15 +208,10 @@
           content="修改"
           placement="top"
         >
-          <i
-            class="el-icon-edit tb-icon"
-            @click="gotoEdit(scope.row, '005')"
-          ></i>
+          <i class="el-icon-edit tb-icon" @click="gotoEdit(scope.row, '005')"></i>
         </el-tooltip>
         <el-tooltip
-          v-if="
-            powers.some((i) => i == '004') && scope.row.status === '1'
-          "
+          v-if="powers.some((i) => i == '004') && scope.row.status === '1'"
           effect="dark"
           content="禁用"
           placement="top"
@@ -236,9 +222,7 @@
           ></i>
         </el-tooltip>
         <el-tooltip
-          v-if="
-            powers.some((i) => i == '004') && scope.row.status === '0'
-          "
+          v-if="powers.some((i) => i == '004') && scope.row.status === '0'"
           effect="dark"
           content="启用"
           placement="top"
@@ -254,29 +238,11 @@
           content="删除"
           placement="top"
         >
-          <i
-            class="el-icon-delete tb-icon"
-            @click="deleteItem(scope.row.id)"
-          ></i>
-        </el-tooltip>
-        <el-tooltip
-          v-if="powers.some((i) => i == '072')"
-          effect="dark"
-          content="查看支持品牌"
-          placement="top"
-        >
-          <i class="el-icon-search tb-icon" @click="openModal(scope.row)"></i>
+          <i class="el-icon-delete tb-icon" @click="deleteItem(scope.row.id)"></i>
         </el-tooltip>
       </template>
     </ex-table>
     <no-auth v-else></no-auth>
-    <!-- 查看支持品牌 -->
-    <show-brand-list
-      :sitem="modelSitem"
-      :show-model="showModel"
-      @refresh="showModel = false"
-      @cancel="showModel = false"
-    />
   </div>
 </template>
 <script>
@@ -286,22 +252,17 @@ import roleLevel from "@/assets/js/roleLevel";
 import mixinPage from "@/mixins/elPaginationHandle";
 import { mapGetters } from "vuex";
 
-import showBrandList from "./components/show-brand-list";
 import resToken from "@/mixins/resToken";
 export default {
   name: "supplier",
   mixins: [mixinPage, resToken],
-  components: {
-    showBrandList,
-  },
+
   computed: {
     //组件SIZE设置
     ...mapGetters(["tablebtnSize", "searchSize", "size"]),
     powers() {
       const tran =
-        this.$store.getters.btnList.find(
-          (item) => item.menu_route == "supplier"
-        ) || {};
+        this.$store.getters.btnList.find((item) => item.menu_route == "supplier") || {};
       const { action } = tran ?? {};
       return action ?? [];
     },
@@ -411,39 +372,38 @@ export default {
     };
   },
   mounted() {
-     const { back } = this.$route.query;
+    const { back } = this.$route.query;
     if (back) {
       this.parmValue = JSON.parse(back);
-      console.log(this.parmValue)
-      const {page,size}=this.parmValue;
+      console.log(this.parmValue);
+      const { page, size } = this.parmValue;
       // this.parmValue.start = start || last_start;
       // this.parmValue.end = end || last_end;
       // if(this.parmValue.brandid.length>0){
       //   this.brandid = [this.parmValue.brandid] ;
       // }
-      
-       this.pageInfo= {
+
+      this.pageInfo = {
         size: size,
         curr: page,
         total: 0,
-      }
+      };
       //多选条件
-    // this.select = this.parmValue.select;
-    // this.sselect = this.parmValue.sselect;
-    // this.sinput = this.parmValue.sinput
-
-    }else{
+      // this.select = this.parmValue.select;
+      // this.sselect = this.parmValue.sselect;
+      // this.sinput = this.parmValue.sinput
+    } else {
       //  this.select = "1";
       //  this.sselect = "创建时间"
     }
     this.searchList();
   },
   methods: {
-     getRouter(toRouter, queryId){
+    getRouter(toRouter, queryId) {
       if (toRouter && queryId) {
         let model = {
           id: queryId,
-          type: 'view',
+          type: "view",
         };
 
         //有多选框的条件
@@ -451,13 +411,13 @@ export default {
         // this.parmValue.sselect = this.sselect ;
         // this.parmValue.sinput= this.sinput;
         //
-        console.log(queryId)
-         let routerModel = {
+        console.log(queryId);
+        let routerModel = {
           options: JSON.parse(JSON.stringify(this.parmValue)),
           router: this.$route.path,
         };
         model.preModel = JSON.stringify(routerModel);
-        
+
         this.routeGoto(toRouter, model);
       } else {
         this.$message.warning("暂未找到相关流程！");
@@ -484,11 +444,7 @@ export default {
       };
       this.searchList();
     },
-    // 新建/编辑/详情
-    openModal(sitem) {
-      this.modelSitem = sitem;
-      this.showModel = true;
-    },
+
     // 时间
     async handleTime(e) {
       this.parmValue.start = e.startTime || "";
@@ -604,5 +560,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/serviceParam/supplierAccount/index.vue

@@ -1,179 +1,171 @@
 <template>
-  <div class="supplierAccount">
+  <div class="supplierAccount pagePadding">
     <div class="supplierAccount_show_box" v-if="powers.some((i) => i == '001')">
-      <div class="role-list fl">
-        <supplierlist @change="supplierChange" />
-      </div>
-      <div class="rule-view fr">
-        <ex-table
-          v-loading="loading"
-          :table="table"
-          :data="tableData"
-          :columns="columns"
-          :page="pageInfo"
-          :size="size"
-          @page-curr-change="handlePageChange"
-          @page-size-change="handleSizeChange"
-          @screen-reset="
-            pageInfo.curr = 1;
-            parmValue.page = 1;
-            searchList();
-          "
-          @screen-submit="
-            pageInfo.curr = 1;
-            parmValue.page = 1;
-            searchList();
-          "
-        >
-          <template #table-header="{}">
-            <div style="width: 100%">
-              <el-row style="padding: 0 0 0 80px">
-                <el-col :span="4" style="width: 160px">
-                  <el-select
-                    v-model="parmValue.status"
-                    filterable
-                    clearable
-                    :size="searchSize"
-                    placeholder="状态"
-                    style="width: 100%"
-                    @change="
-                      pageInfo.curr = 1;
-                      parmValue.page = 1;
-                      searchList();
-                    "
-                  >
-                    <el-option
-                      v-for="item in statusList"
-                      :key="'status' + item.code"
-                      :label="item.name"
-                      :value="item.code"
-                    />
-                  </el-select>
-                </el-col>
-                <el-col :span="4" style="width: 200px; padding: 0 0 0 10px">
-                  <el-input
-                    :size="searchSize"
-                    v-model="parmValue.keyword"
-                    :maxlength="40"
-                    @change="
-                      pageInfo.curr = 1;
-                      parmValue.page = 1;
-                      searchList();
-                    "
-                    placeholder="姓名/手机号"
-                  ></el-input>
-                </el-col>
+      <ex-table
+        v-loading="loading"
+        :table="table"
+        :data="tableData"
+        :columns="columns"
+        :page="pageInfo"
+        :size="size"
+        @page-curr-change="handlePageChange"
+        @page-size-change="handleSizeChange"
+        @screen-reset="
+          pageInfo.curr = 1;
+          parmValue.page = 1;
+          searchList();
+        "
+        @screen-submit="
+          pageInfo.curr = 1;
+          parmValue.page = 1;
+          searchList();
+        "
+      >
+        <template #table-header="{}">
+          <div style="width: 100%">
+            <el-row style="padding: 0 0 0 80px">
+              <el-col :span="4" style="width: 160px">
+                <el-select
+                  v-model="parmValue.status"
+                  filterable
+                  clearable
+                  :size="searchSize"
+                  placeholder="状态"
+                  style="width: 100%"
+                  @change="
+                    pageInfo.curr = 1;
+                    parmValue.page = 1;
+                    searchList();
+                  "
+                >
+                  <el-option
+                    v-for="item in statusList"
+                    :key="'status' + item.code"
+                    :label="item.name"
+                    :value="item.code"
+                  />
+                </el-select>
+              </el-col>
+              <el-col :span="4" style="width: 200px; padding: 0 0 0 10px">
+                <el-input
+                  :size="searchSize"
+                  v-model="parmValue.keyword"
+                  :maxlength="40"
+                  @change="
+                    pageInfo.curr = 1;
+                    parmValue.page = 1;
+                    searchList();
+                  "
+                  placeholder="姓名/手机号"
+                ></el-input>
+              </el-col>
 
-                <el-col :span="3" class="fr" style="width: 66px; padding: 0 0 0 10px">
-                  <el-button type="primary" :size="searchSize" @click="searchList">
-                    刷新
-                  </el-button>
-                </el-col>
-                <el-col :span="3" class="fr" style="width: 66px; padding: 0 0 0 10px">
-                  <el-button type="warning" :size="searchSize" @click="restSearch">
-                    重置
-                  </el-button>
-                </el-col>
-                <el-col
-                  :span="3"
-                  class="fr"
-                  style="width: 66px; padding: 0 0 0 10px"
-                  v-if="powers.some((i) => i == '003')"
+              <el-col :span="3" class="fr" style="width: 66px; padding: 0 0 0 10px">
+                <el-button type="primary" :size="searchSize" @click="searchList">
+                  刷新
+                </el-button>
+              </el-col>
+              <el-col :span="3" class="fr" style="width: 66px; padding: 0 0 0 10px">
+                <el-button type="warning" :size="searchSize" @click="restSearch">
+                  重置
+                </el-button>
+              </el-col>
+              <el-col
+                :span="3"
+                class="fr"
+                style="width: 66px; padding: 0 0 0 10px"
+                v-if="powers.some((i) => i == '003')"
+              >
+                <el-button
+                  :size="searchSize"
+                  type="success"
+                  style="float: right"
+                  @click="openModal('add', false)"
                 >
-                  <el-button
-                    :size="searchSize"
-                    type="success"
-                    style="float: right"
-                    @click="openModal('add', false)"
-                  >
-                    添加
-                  </el-button>
-                </el-col>
-              </el-row>
-            </div></template
-          >
-          <template #status="{ scope }">
-            <el-tag
-              :size="tablebtnSize"
-              :type="scope.row.status == '0' ? 'warning' : ''"
-              v-text="
-                (statusOptions.find((item) => item.id == scope.row.status) || {}).label ||
-                '--'
-              "
-            ></el-tag>
-          </template>
-          <template #ocr_status="{ scope }">
-            <el-tag
-              :size="tablebtnSize"
-              :type="
-                scope.row.ocr_status == '0'
-                  ? 'info'
-                  : scope.row.ocr_status == '1'
-                  ? 'primary'
-                  : scope.row.ocr_status == '2'
-                  ? 'danger'
-                  : ''
-              "
-              v-text="
-                (ocr_status.find((item) => item.id == scope.row.ocr_status) || {})
-                  .label || '--'
-              "
-            ></el-tag>
-          </template>
+                  添加
+                </el-button>
+              </el-col>
+            </el-row>
+          </div></template
+        >
+        <template #status="{ scope }">
+          <el-tag
+            :size="tablebtnSize"
+            :type="scope.row.status == '0' ? 'warning' : ''"
+            v-text="
+              (statusOptions.find((item) => item.id == scope.row.status) || {}).label ||
+              '--'
+            "
+          ></el-tag>
+        </template>
+        <template #ocr_status="{ scope }">
+          <el-tag
+            :size="tablebtnSize"
+            :type="
+              scope.row.ocr_status == '0'
+                ? 'info'
+                : scope.row.ocr_status == '1'
+                ? 'primary'
+                : scope.row.ocr_status == '2'
+                ? 'danger'
+                : ''
+            "
+            v-text="
+              (ocr_status.find((item) => item.id == scope.row.ocr_status) || {}).label ||
+              '--'
+            "
+          ></el-tag>
+        </template>
 
-          <template #operation="{ scope }">
-            <el-tooltip
-              v-if="powers.some((i) => i == '007')"
-              effect="dark"
-              content="详情"
-              placement="top"
-            >
-              <i class="el-icon-view tb-icon" @click="openModal(scope.row.uid, true)"></i>
-            </el-tooltip>
-            <el-tooltip
-              v-if="powers.some((i) => i == '005')"
-              effect="dark"
-              content="修改"
-              placement="top"
-            >
-              <i
-                class="el-icon-edit tb-icon"
-                @click="openModal(scope.row.uid, false)"
-              ></i>
-            </el-tooltip>
-            <el-tooltip
-              v-if="powers.some((i) => i == '004') && scope.row.status === '1'"
-              effect="dark"
-              content="禁用"
-              placement="top"
-            >
-              <i
-                class="el-icon-video-pause tb-icon"
-                @click="changeStatus(scope.row.id, scope.row.status)"
-              ></i>
-            </el-tooltip>
-            <el-tooltip
-              v-if="powers.some((i) => i == '004') && scope.row.status === '0'"
-              effect="dark"
-              content="启用"
-              placement="top"
-            >
-              <i
-                class="el-icon-video-play tb-icon"
-                @click="changeStatus(scope.row.id, scope.row.status)"
-              ></i>
-            </el-tooltip>
-            <el-tooltip
-              v-if="powers.some((i) => i == '006')"
-              effect="dark"
-              content="删除"
-              placement="top"
-            >
-              <i class="el-icon-delete tb-icon" @click="deleteItem(scope.row.id)"></i>
-            </el-tooltip>
-          </template>
-        </ex-table>
-      </div>
+        <template #operation="{ scope }">
+          <el-tooltip
+            v-if="powers.some((i) => i == '007')"
+            effect="dark"
+            content="详情"
+            placement="top"
+          >
+            <i class="el-icon-view tb-icon" @click="openModal(scope.row.uid, true)"></i>
+          </el-tooltip>
+          <el-tooltip
+            v-if="powers.some((i) => i == '005')"
+            effect="dark"
+            content="修改"
+            placement="top"
+          >
+            <i class="el-icon-edit tb-icon" @click="openModal(scope.row.uid, false)"></i>
+          </el-tooltip>
+          <el-tooltip
+            v-if="powers.some((i) => i == '004') && scope.row.status === '1'"
+            effect="dark"
+            content="禁用"
+            placement="top"
+          >
+            <i
+              class="el-icon-video-pause tb-icon"
+              @click="changeStatus(scope.row.id, scope.row.status)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip
+            v-if="powers.some((i) => i == '004') && scope.row.status === '0'"
+            effect="dark"
+            content="启用"
+            placement="top"
+          >
+            <i
+              class="el-icon-video-play tb-icon"
+              @click="changeStatus(scope.row.id, scope.row.status)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip
+            v-if="powers.some((i) => i == '006')"
+            effect="dark"
+            content="删除"
+            placement="top"
+          >
+            <i class="el-icon-delete tb-icon" @click="deleteItem(scope.row.id)"></i>
+          </el-tooltip>
+        </template>
+      </ex-table>
       <add-edit
         :id="modelId"
         :sitem="sitem"
@@ -200,7 +192,6 @@ import asyncRequest from "@/apis/service/serviceParam/supplierAccount";
 import { statusList } from "@/assets/js/statusList";
 import mixinPage from "@/mixins/elPaginationHandle";
 import { mapGetters } from "vuex";
-import supplierlist from "./supplierlist";
 import addEdit from "./addEdit";
 import resetPassword from "./resetPassword";
 import resToken from "@/mixins/resToken";
@@ -209,7 +200,6 @@ export default {
   name: "supplierAccount",
   mixins: [mixinPage, resToken],
   components: {
-    supplierlist,
     addEdit,
     resetPassword,
   },
@@ -228,7 +218,7 @@ export default {
   data() {
     return {
       statusList: statusList,
-      loading: true,
+      loading: false,
 
       stype: {},
       parmValue: {
@@ -272,7 +262,9 @@ export default {
       columns,
     };
   },
-
+  mounted() {
+    this.searchList();
+  },
   methods: {
     async supplierChange(e) {
       this.parmValue.page = 1;
@@ -426,9 +418,10 @@ export default {
 
     display: relative;
     width: 100%;
-    height: calc(100vh - 50px);
-    overflow: hidden;
-    text-align: left;
+    height: 100%;
+    // height: calc(100vh - 50px);
+    // overflow: hidden;
+    // text-align: left;
     //左侧
     .role-list {
       height: 100%;

src/views/serviceParam/supplier/components/addEdit.vue → src/views/serviceParam/supplierBrand/addEdit.vue

@@ -26,15 +26,6 @@
             label-width="90px"
             class="demo-ruleForm"
           >
-            <el-form-item label="供应商" prop="gyscode">
-              <search-supplier
-                :disabled="true"
-                :value="ruleForm.gyscode"
-                :placeholder="'供应商'"
-                :isDetail="true"
-                :names="gys_name"
-              />
-            </el-form-item>
             <el-form-item label="支持品牌" prop="brand_id">
               <search-brand
                 :value="ruleForm.brand_id"
@@ -47,19 +38,12 @@
               />
             </el-form-item>
             <el-form-item label="授权类型" prop="long">
-              <el-radio-group
-                :disabled="type === 'view'"
-                v-model="ruleForm.long"
-              >
+              <el-radio-group :disabled="type === 'view'" v-model="ruleForm.long">
                 <el-radio :label="'0'">长期</el-radio>
                 <el-radio :label="'1'">非长期</el-radio>
               </el-radio-group>
             </el-form-item>
-            <el-form-item
-              v-if="ruleForm.long === '1'"
-              label="授权时间"
-              style="margin: 0"
-            >
+            <el-form-item v-if="ruleForm.long === '1'" label="授权时间" style="margin: 0">
               <el-col :span="11">
                 <el-form-item prop="starttime">
                   <el-date-picker
@@ -135,7 +119,7 @@
   </el-dialog>
 </template>
 <script>
-import asyncRequest from "@/apis/service/serviceParam/supplier";
+import asyncRequest from "@/apis/service/serviceParam/supplierBrand";
 import resToken from "@/mixins/resToken";
 export default {
   name: "brand",
@@ -147,27 +131,18 @@ export default {
       title: "添加支持品牌",
       showModelThis: this.showModel,
       brand_name: "",
-      gys_name: "",
       ruleForm: {},
       rulesThis: this.rules,
       pickerOptions1: {
         disabledDate: (time) => {
-          if (
-            this.ruleForm.endtime != null &&
-            this.ruleForm.endtime != "" &&
-            time
-          ) {
+          if (this.ruleForm.endtime != null && this.ruleForm.endtime != "" && time) {
             return time.getTime() > new Date(this.ruleForm.endtime).valueOf();
           }
         },
       },
       pickerOptions2: {
         disabledDate: (time) => {
-          if (
-            this.ruleForm.starttime != null &&
-            this.ruleForm.starttime != "" &&
-            time
-          ) {
+          if (this.ruleForm.starttime != null && this.ruleForm.starttime != "" && time) {
             return time.getTime() < new Date(this.ruleForm.starttime).valueOf();
           }
         },
@@ -175,7 +150,6 @@ export default {
       rules: {
         gyscode: [
           {
-            type: "array",
             required: true,
             message: "供应商不能为空",
             trigger: "change",
@@ -190,18 +164,9 @@ export default {
             trigger: "blur",
           },
         ],
-        long: [
-          { required: false, message: "请选择授权类型", trigger: "change" },
-        ],
-        starttime: [
-          { required: false, message: "请选择授权开始日期", trigger: "blur" },
-        ],
-        brand_book: [
-          { required: false, message: "请选择授权结束日期", trigger: "change" },
-        ],
-        brand_book: [
-          { required: false, message: "授权图片不能为空", trigger: "change" },
-        ],
+        long: [{ required: false, message: "请选择授权类型", trigger: "change" }],
+        starttime: [{ required: false, message: "请选择授权开始日期", trigger: "blur" }],
+        brand_book: [{ required: false, message: "授权图片不能为空", trigger: "change" }],
       },
     };
   },
@@ -222,7 +187,6 @@ export default {
     async initForm() {
       this.loading = true;
       this.brand_name = "";
-      this.gys_name = "";
       this.resetFormData();
       if (this.type === "add") {
         this.rulesThis = this.rules;
@@ -239,9 +203,6 @@ export default {
         await this.resetForm();
         await this.initData();
       }
-      console.log(this.brand_name);
-      console.log(this.gys_name);
-      console.log(this.ruleForm.gyscode);
       this.loading = false;
     },
     async resetForm() {
@@ -280,25 +241,20 @@ export default {
       }
     },
     resetFormData() {
-      console.log(this.sitem);
-      const { code, name } = JSON.parse(JSON.stringify(this.sitem));
-      if (this.type === "add") {
-        this.gys_name = name || "";
-      }
-
       this.ruleForm = {
         id: "",
-        gyscode: this.type === "add" && code ? [code] : [],
+        gyscode: this.sitem,
         brand_id: [],
         long: "1",
         starttime: "",
         endtime: "",
         brand_book: "",
       };
+      console.log(this.sitem);
     },
     async initData() {
       this.loading = true;
-      const { code, message, data } = await asyncRequest.kdetail({
+      const { code, message, data } = await asyncRequest.detail({
         id: this.id,
       });
       this.loading = false;
@@ -312,13 +268,11 @@ export default {
           starttime,
           endtime,
           gyscode,
-          name,
         } = data;
         this.brand_name = brand_name;
-        this.gys_name = name;
         this.ruleForm = {
           id: id || "",
-          gyscode: gyscode ? [gyscode] : [],
+          gyscode: gyscode,
           brand_id: brand_id ? [brand_id] : [],
           long: long || "",
           starttime: starttime || "",
@@ -334,23 +288,22 @@ export default {
     async submitForm() {
       await this.$refs.ruleForm.validate(async (valid) => {
         if (valid) {
-          if (this.loading) {
-            return;
-          }
+          if (this.loading) return;
           this.loading = true;
           let model = JSON.parse(JSON.stringify(this.ruleForm));
           model.brand_id = model.brand_id.toString();
-          model.gyscode = model.gyscode.toString();
+          // model.gyscode = model.gyscode.toString();
 
           let res = {};
           if (this.type === "add") {
             delete model["id"];
-            res = await asyncRequest.kadd(model);
+            res = await asyncRequest.add(model);
           } else {
-            res = await asyncRequest.kupdate(model);
+            res = await asyncRequest.update(model);
           }
           this.loading = false;
-          if (res && res.code === 0) {
+          const { code, data, message } = res;
+          if (code === 0) {
             const title = this.type === "add" ? "添加成功!" : "修改成功!";
             this.$notify.success({
               title,
@@ -359,10 +312,10 @@ export default {
             this.showModelThis = false;
             // 刷新
             this.$emit("refresh");
-          } else if (res && res.code >= 100 && res.code <= 104) {
+          } else if (code >= 100 && code <= 104) {
             await this.logout();
           } else {
-            this.$message.warning(res.message);
+            this.$message.warning(message);
           }
         } else {
           console.log("error submit!!");
@@ -372,12 +325,8 @@ export default {
     },
     //商品品牌选择
     brandidsearchChange(e) {
-      const { id, code, label } = e;
-      if (id) {
-        this.ruleForm.brand_id = [id];
-      } else {
-        this.ruleForm.brand_id = [];
-      }
+      const { id } = e;
+      this.ruleForm.brand_id = id ? [id] : [];
       this.$refs.ruleForm.validateField("brand_id");
     },
     //判断图片规格
@@ -426,7 +375,7 @@ export default {
 };
 </script>
 
-   <style lang="scss" scoped>
+<style lang="scss" scoped>
 .brand {
 }
 </style>

src/views/serviceParam/supplier/components/show-brand-list/columns.js → src/views/serviceParam/supplierBrand/columns.js

@@ -3,47 +3,47 @@ export default [
   {
     prop: "gyscode",
     label: "供应商编号",
-    width: "140px",
+    minWidth: "140px",
   },
   {
     prop: "brand_name",
     label: "品牌",
-    width: "100px",
+    minWidth: "100px",
   },
   {
     prop: "status",
     label: "状态",
-    width: "60",
+    minWidth: "60",
     _slot_: "status",
   },
   {
     prop: "brand_book",
     label: "授权图",
     _slot_: "brand_book",
-    width: "60px",
+    minWidth: "60px",
   },
 
   {
     prop: "long",
     label: "授权类型",
-    width: "70",
+    minWidth: "70",
     _slot_: "long",
   },
   {
     prop: "longTime",
     label: "授权日期",
-    width: "180",
+    minWidth: "180",
     _slot_: "longTime",
   },
   {
     prop: "creater",
     label: "创建人",
-    width: "60px",
+    minWidth: "60px",
   },
   {
     prop: "addtime",
     label: "添加时间",
-    width: "145px",
+    minWidth: "145px",
   },
   {
     prop: "",

src/views/serviceParam/supplierBrand/index.vue

@@ -0,0 +1,489 @@
+<template>
+  <div class="supplierBrand">
+    <div class="supplierBrand_show_box" v-if="powers.some((i) => i == '001')">
+      <div class="role-list fl">
+        <supplierlist @change="supplierChange" />
+      </div>
+      <div class="rule-view fr">
+        <ex-table
+          v-loading="loading"
+          :table="table"
+          :data="tableData"
+          :columns="columns"
+          :page="pageInfo"
+          :size="size"
+          @page-curr-change="handlePageChange"
+          @page-size-change="handleSizeChange"
+          @screen-reset="
+            pageInfo.curr = 1;
+            parmValue.page = 1;
+            searchList();
+          "
+          @screen-submit="
+            pageInfo.curr = 1;
+            parmValue.page = 1;
+            searchList();
+          "
+        >
+          <template #table-header="{}">
+            <div style="width: 100%">
+              <el-row style="padding: 0 0 0 0px">
+                <el-col :span="24">
+                  <div class="fl" style="height: 28px; line-height: 28px">
+                    <span>供应商支持品牌：</span>
+                  </div>
+                  <el-button
+                    type="primary"
+                    class="fr"
+                    style="margin: 0 0 0 10px"
+                    :size="searchSize"
+                    @click="searchList"
+                  >
+                    刷新
+                  </el-button>
+
+                  <el-button
+                    type="warning"
+                    style="margin: 0 0 0 10px"
+                    :size="searchSize"
+                    class="fr"
+                    @click="restSearch"
+                  >
+                    重置
+                  </el-button>
+                  <el-button
+                    v-if="powers.some((i) => i == '003')"
+                    type="success"
+                    class="fr"
+                    style="margin: 0 0 0 10px"
+                    :size="searchSize"
+                    @click="openModal(-1, 'add')"
+                  >
+                    添加
+                  </el-button></el-col
+                >
+              </el-row>
+            </div>
+          </template>
+          <template #brand_book="{ scope }">
+            <div
+              v-if="scope.row.brand_book"
+              style="width: 20px; height: 20px"
+              class="hover"
+              v-viewer
+            >
+              <img
+                :src="scope.row.brand_book"
+                style="display: inline-block; width: 100%; height: 100%"
+                alt=""
+              />
+            </div>
+          </template>
+          <template #long="{ scope }">
+            <el-tag
+              :size="tablebtnSize"
+              :type="scope.row.long == '1' ? 'warning' : ''"
+              v-text="
+                (options1.find((item) => item.id == scope.row.long) || {}).name || '--'
+              "
+            ></el-tag>
+          </template>
+          <template #longTime="{ scope }">
+            {{ scope.row.starttime }}~{{ scope.row.endtime }}
+          </template>
+          <template #status="{ scope }">
+            <el-tag
+              :size="tablebtnSize"
+              :type="scope.row.status == '0' ? 'warning' : ''"
+              v-text="
+                (options2.find((item) => item.id == scope.row.status) || {}).name || '--'
+              "
+            ></el-tag>
+          </template>
+          <template #operation="{ scope }">
+            <el-tooltip
+              effect="dark"
+              content="详情"
+              v-if="powers.some((i) => i == '007')"
+              placement="top"
+            >
+              <i
+                class="el-icon-view tb-icon"
+                @click="openModal(scope.row.id, 'view')"
+              ></i>
+            </el-tooltip>
+            <el-tooltip
+              effect="dark"
+              content="修改"
+              v-if="powers.some((i) => i == '005') && scope.row.status === '0'"
+              placement="top"
+            >
+              <i
+                class="el-icon-edit tb-icon"
+                @click="openModal(scope.row.id, 'edit')"
+              ></i> </el-tooltip
+            ><el-tooltip
+              v-if="powers.some((i) => i == '004') && scope.row.status === '1'"
+              effect="dark"
+              content="禁用"
+              placement="top"
+            >
+              <i
+                class="el-icon-video-pause tb-icon"
+                @click="changeStatus(scope.row.id, scope.row.status)"
+              ></i>
+            </el-tooltip>
+            <el-tooltip
+              v-if="powers.some((i) => i == '004') && scope.row.status === '0'"
+              effect="dark"
+              content="启用"
+              placement="top"
+            >
+              <i
+                class="el-icon-video-play tb-icon"
+                @click="changeStatus(scope.row.id, scope.row.status)"
+              ></i> </el-tooltip
+            ><el-tooltip
+              effect="dark"
+              content="删除"
+              placement="top"
+              v-if="powers.some((i) => i == '006') && scope.row.status === '0'"
+            >
+              <i class="el-icon-delete tb-icon" @click="deleteItem(scope.row.id)"></i>
+            </el-tooltip>
+          </template>
+        </ex-table>
+        <add-edit
+          :id="modelId"
+          :type="isDetail"
+          :showModel="showModel"
+          :sitem="sitem"
+          @cancel="showModel = false"
+          @refresh="(showModel = false), searchList()"
+        />
+      </div>
+    </div>
+
+    <no-auth v-else></no-auth>
+  </div>
+</template>
+<script>
+import asyncRequest from "@/apis/service/serviceParam/supplierBrand";
+import { statusList } from "@/assets/js/statusList";
+import mixinPage from "@/mixins/elPaginationHandle";
+import { mapGetters } from "vuex";
+import supplierlist from "./supplierlist";
+import addEdit from "./addEdit";
+import resToken from "@/mixins/resToken";
+import columns from "./columns";
+export default {
+  name: "supplierBrand",
+  mixins: [mixinPage, resToken],
+  components: {
+    supplierlist,
+    addEdit,
+  },
+  computed: {
+    //组件SIZE设置
+    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
+    powers() {
+      const tran =
+        this.$store.getters.btnList.find((item) => item.menu_route == "supplierBrand") ||
+        {};
+      const { action } = tran ?? {};
+      return action ?? [];
+    },
+  },
+  data() {
+    return {
+      statusList: statusList,
+      loading: true,
+      options1: [
+        { id: "0", name: "长期" },
+        { id: "1", name: "非长期" },
+      ],
+      options2: [
+        { id: "0", name: "禁用" },
+        { id: "1", name: "启用" },
+      ],
+      showModel: false,
+      modelSitem: null,
+      modelId: "",
+      modelType: "",
+      selectLoading: false,
+      loading: true,
+      showModelThis: false,
+      parmValue: {
+        gyscode: "", // 供应商code
+        page: 1, // 页码
+        size: 15, // 每页显示条数
+      },
+      tableData: [],
+      passwordModel: false,
+      passwordModelId: 0,
+      isPasswordDetail: false,
+      // 表格 - 数据
+      tableData: [],
+      // 表格 - 参数
+      table: {
+        stripe: true,
+        border: true,
+        // _defaultHeader_: ["setcol"],
+      },
+      // 表格 - 分页
+      pageInfo: {
+        size: 15,
+        curr: 1,
+        total: 0,
+      },
+      // 表格 - 列参数
+      columns,
+    };
+  },
+
+  methods: {
+    async supplierChange(e) {
+      this.parmValue.page = 1;
+      this.parmValue.gyscode = e;
+      await this.searchList();
+    },
+
+    restSearch() {
+      // 表格 - 分页
+      this.pageInfo = {
+        size: 15,
+        curr: 1,
+        total: 0,
+      };
+      this.parmValue.page = 1;
+      this.parmValue.size = 15;
+      this.parmValue.keyword = "";
+      this.parmValue.status = "";
+      this.searchList();
+    },
+    openModal(id, isDetail) {
+      if (this.parmValue.gyscode === "") {
+        this.$message.warning("请选择供应商！");
+        return;
+      }
+      this.modelId = id;
+      this.isDetail = isDetail;
+      this.sitem = this.parmValue.gyscode;
+      this.showModel = true;
+    },
+
+    gotoEdit(row, type) {
+      const { status } = row;
+      if (type === "005" && status === "1") {
+        this.$message.warning("禁用后，才可以修改！");
+        return;
+      }
+      this.routeGoto("supplierBrandDetail", {
+        id: row.code,
+        type: "edit",
+      });
+    },
+    /**
+     * 启用/禁用
+     * @param {String} id id
+     * @param {String} status 0-禁用 1-启用
+     */
+    async changeStatus(id, status) {
+      await this.$confirm(`确定要改为${status === "1" ? "禁用" : "启用"}？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          this.loading = true;
+          const model = {
+            id: id,
+            status: status === "1" ? "0" : "1",
+          };
+          const res = await asyncRequest.status(model);
+          if (res && res.code === 0) {
+            this.loading = false;
+            this.$notify.success({
+              title: "状态修改成功！",
+              message: "",
+            });
+            await this.searchList();
+          } else if (res && res.code >= 100 && res.code <= 104) {
+            await this.logout();
+          } else {
+            this.loading = false;
+            this.$message.warning(res.message);
+          }
+        })
+        .catch(() => {
+          console.log("取消");
+        });
+    },
+    async deleteItem(id) {
+      await this.$confirm("确定要删除？", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          const model = {
+            id: id,
+          };
+          const res = await asyncRequest.delete(model);
+          if (res && res.code === 0) {
+            this.$notify.success({
+              title: "删除成功",
+              message: "",
+            });
+            this.searchList();
+          } else if (res && res.code >= 100 && res.code <= 104) {
+            await this.logout();
+          } else {
+            this.$message.warning(res.message);
+          }
+        })
+        .catch(() => {
+          console.log("取消");
+        });
+    },
+    // 刷新表格
+    async searchList() {
+      if (
+        (this.parmValue.start !== "" && this.parmValue.end === "") ||
+        (this.parmValue.start == "" && this.parmValue.end != "")
+      ) {
+        this.$message.warning("开始时间和结束时间不能为空");
+        return;
+      }
+      this.loading = true;
+      const { code, data, message } = await asyncRequest.list(this.parmValue);
+      let scode = parseInt(code + "");
+      if (scode === 0) {
+        const { list, count } = data;
+        this.tableData = list;
+        this.pageInfo.total = Number(count + "");
+      } else if (scode >= 100 && scode <= 104) {
+        await this.logout();
+      } else {
+        this.tableData = [];
+        this.pageInfo.total = 0;
+      }
+      this.loading = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+.supplierBrand {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 50px);
+  overflow: hidden;
+
+  .supplierBrand_show_box {
+    // position: relative;
+    // height: calc(100% - 50px);
+    // min-height: calc(100% - 50px);
+
+    display: relative;
+    width: 100%;
+    height: 100%;
+    // height: calc(100vh - 50px);
+    // overflow: hidden;
+    // text-align: left;
+    //左侧
+    .role-list {
+      height: 100%;
+      overflow-y: auto;
+      width: 320px;
+      // padding: 8px 16px;
+      min-height: 100%;
+      flex-shrink: 0;
+      border-right: 2px solid #dfe6ec;
+      @include scrollBar();
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: 2px;
+        background-color: #e4e7ed;
+        z-index: 1;
+      }
+      .role-list__title {
+        color: #b4b6c0;
+        line-height: 32px;
+      }
+      .role-list__item {
+        position: relative;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 32px;
+        line-height: 32px;
+        padding-left: 8px;
+        color: rgb(48, 49, 51);
+        cursor: pointer;
+        i {
+          position: absolute;
+          right: 0;
+          line-height: 32px;
+        }
+      }
+      .role-list__item.active {
+        color: #63cbe7;
+        background: #f7f7f7;
+      }
+    }
+    //右侧
+    .rule-view {
+      height: calc(100% - 50px);
+      width: calc(100% - 320px);
+      overflow-y: auto;
+      padding: 10px 16px;
+      @include scrollBar();
+      .rule-list {
+        border-right: 1px solid #dfe6ec;
+        .title {
+          padding: 18px 18px 12px 18px;
+          border-bottom: 1px dashed #dfe6ec;
+          font-size: 15px;
+          color: #000;
+        }
+        .main {
+          padding: 18px 18px 12px 18px;
+          border-bottom: 1px solid #dfe6ec;
+        }
+        .main-title {
+          width: 80px;
+        }
+        .main-item {
+          width: calc(100% - 80px);
+        }
+      }
+    }
+    .rule-bottom {
+      padding: 10px 18px 8px 0;
+      background: #fff;
+      width: calc(100% - 200px);
+      position: absolute;
+      text-align: right;
+      bottom: 0;
+      right: 0;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 2px;
+        width: 100%;
+        background-color: #e4e7ed;
+        z-index: 1;
+      }
+    }
+  }
+}
+</style>