From a672be64865ad79dd70e3d990ad13d64f8896d86 Mon Sep 17 00:00:00 2001
From: wanglei <wl2666675>
Date: Wed, 28 May 2025 10:18:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E9=97=B4=E6=A8=A1=E5=9D=97=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/pay/products/index.vue | 584 +++++++++++-----------
 1 file changed, 303 insertions(+), 281 deletions(-)

diff --git a/ruoyi-ui/src/views/pay/products/index.vue b/ruoyi-ui/src/views/pay/products/index.vue
index 9316e59..7feff89 100644
--- a/ruoyi-ui/src/views/pay/products/index.vue
+++ b/ruoyi-ui/src/views/pay/products/index.vue
@@ -1,269 +1,177 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="租户id" prop="tenantId">
-        <el-input
-          v-model="queryParams.tenantId"
-          placeholder="请输入租户id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="毛料ID" prop="materialId">
-        <el-input
-          v-model="queryParams.materialId"
-          placeholder="请输入毛料ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="产品名称" prop="productName">
-        <el-input
-          v-model="queryParams.productName"
-          placeholder="请输入产品名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="网机编号" prop="netMachineNo">
-        <el-input
-          v-model="queryParams.netMachineNo"
-          placeholder="请输入网机编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="图纸编号" prop="drawingNum">
-        <el-input
-          v-model="queryParams.drawingNum"
-          placeholder="请输入图纸编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="工序" prop="process">
-        <el-input
-          v-model="queryParams.process"
-          placeholder="请输入工序"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="规格型号" prop="model">
-        <el-input
-          v-model="queryParams.model"
-          placeholder="请输入规格型号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="产品单位" prop="danwei">
-        <el-input
-          v-model="queryParams.danwei"
-          placeholder="请输入产品单位"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="毛料名称" prop="originName">
-        <el-input
-          v-model="queryParams.originName"
-          placeholder="请输入毛料名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="毛料规格" prop="originModel">
-        <el-input
-          v-model="queryParams.originModel"
-          placeholder="请输入毛料规格"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="毛料尺寸" prop="originSize">
-        <el-input
-          v-model="queryParams.originSize"
-          placeholder="请输入毛料尺寸"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="毛料单位" prop="originDanwei">
-        <el-input
-          v-model="queryParams.originDanwei"
-          placeholder="请输入毛料单位"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="入库时间" prop="storageTime">
-        <el-date-picker clearable
-          v-model="queryParams.storageTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择入库时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="最低价格" prop="minPrice">
-        <el-input
-          v-model="queryParams.minPrice"
-          placeholder="请输入最低价格"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="最高价格" prop="maxPrice">
-        <el-input
-          v-model="queryParams.maxPrice"
-          placeholder="请输入最高价格"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="删除标志" prop="deleted">
-        <el-input
-          v-model="queryParams.deleted"
-          placeholder="请输入删除标志"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['pay:products:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['pay:products:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['pay:products:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['pay:products:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <div class="company" v-if="!$store.state.user.tenantId">
+      <el-input
+        style="width: 200px"
+        placeholder="公司名称"
+        size="small"
+        prefix-icon="el-icon-search"
+        v-model="gsInfo.tenantName"
+        @keyup.enter.native="getGsInfoList">
+      </el-input>
+      <div class="cp-content" style="width: 200px">
+        <div :class="gsInfo.active_id===item.id?'cp-item active':'cp-item'" @click="changCompany(item.id)" v-for="item in gsInfo.list">{{ item.name }}</div>
+      </div>
+    </div>
+
+    <div :class="$store.state.user.tenantId?'content-all':'content'">
 
-    <el-table v-loading="loading" :data="productsList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="id" v-if="true"/>
-      <el-table-column label="租户id" align="center" prop="tenantId" />
-      <el-table-column label="毛料ID" align="center" prop="materialId" />
-      <el-table-column label="产品名称" align="center" prop="productName" />
-      <el-table-column label="网机编号" align="center" prop="netMachineNo" />
-      <el-table-column label="图纸编号" align="center" prop="drawingNum" />
-      <el-table-column label="工序" align="center" prop="process" />
-      <el-table-column label="规格型号" align="center" prop="model" />
-      <el-table-column label="产品单位" align="center" prop="danwei" />
-      <el-table-column label="毛料名称" align="center" prop="originName" />
-      <el-table-column label="毛料规格" align="center" prop="originModel" />
-      <el-table-column label="毛料尺寸" align="center" prop="originSize" />
-      <el-table-column label="毛料单位" align="center" prop="originDanwei" />
-      <el-table-column label="入库时间" align="center" prop="storageTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.storageTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="最低价格" align="center" prop="minPrice" />
-      <el-table-column label="最高价格" align="center" prop="maxPrice" />
-      <el-table-column label="删除标志" align="center" prop="deleted" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="产品名称" prop="productName">
+          <el-input
+            v-model="queryParams.productName"
+            placeholder="请输入产品名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="入库时间" prop="storageTime">
+          <el-date-picker clearable
+                          v-model="queryParams.storageTime"
+                          type="date"
+                          value-format="yyyy-MM-dd"
+                          placeholder="请选择入库时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['pay:products:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['pay:products:edit']"
           >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
           <el-button
-            size="mini"
-            type="text"
+            type="danger"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['pay:products:remove']"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['pay:products:export']"
+          >导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table v-loading="loading" :data="productsList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="ID" align="center" prop="id" v-if="true"/>
+        <el-table-column label="产品名称" align="center" prop="productName" />
+        <!--      <el-table-column label="网机编号" align="center" prop="netMachineNo" />
+              <el-table-column label="图纸编号" align="center" prop="drawingNum" />-->
+        <el-table-column label="工序" align="center" prop="process" />
+        <el-table-column label="规格型号" align="center" prop="model" />
+        <el-table-column label="产品单位" align="center" prop="danwei" />
+        <el-table-column label="毛料名称" align="center" prop="originName" />
+        <el-table-column label="毛料规格" align="center" prop="originModel" />
+        <el-table-column label="毛料尺寸" align="center" prop="originSize" />
+        <el-table-column label="毛料单位" align="center" prop="originDanwei" />
+        <el-table-column label="入库时间" align="center" prop="storageTime" width="120">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.storageTime, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="最低价格" align="center" prop="minPrice" />
+        <el-table-column label="最高价格" align="center" prop="maxPrice" />
+        <!--      <el-table-column label="删除标志" align="center" prop="deleted" />-->
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['pay:products:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['pay:products:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+
+    </div>
 
     <!-- 添加或修改产品对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="租户id" prop="tenantId">
+<!--        <el-form-item label="租户id" prop="tenantId">
           <el-input v-model="form.tenantId" placeholder="请输入租户id" />
         </el-form-item>
         <el-form-item label="毛料ID" prop="materialId">
           <el-input v-model="form.materialId" placeholder="请输入毛料ID" />
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="产品名称" prop="productName">
           <el-input v-model="form.productName" placeholder="请输入产品名称" />
         </el-form-item>
-        <el-form-item label="网机编号" prop="netMachineNo">
+<!--        <el-form-item label="网机编号" prop="netMachineNo">
           <el-input v-model="form.netMachineNo" placeholder="请输入网机编号" />
         </el-form-item>
         <el-form-item label="图纸编号" prop="drawingNum">
           <el-input v-model="form.drawingNum" placeholder="请输入图纸编号" />
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="工序" prop="process">
           <el-input v-model="form.process" placeholder="请输入工序" />
         </el-form-item>
+        <el-form-item label="毛料名称" prop="originName">
+<!--          <el-input v-model="form.originName" placeholder="请输入毛料名称" />-->
+          <el-input placeholder="请选择毛料名称" readonly v-model="form.originName" @focus="selectOrigin">
+            <i slot="suffix" class="el-input__icon el-icon-search" style="color:#0f00d1; font-weight: bolder"></i>
+          </el-input>
+        </el-form-item>
         <el-form-item label="规格型号" prop="model">
           <el-input v-model="form.model" placeholder="请输入规格型号" />
         </el-form-item>
         <el-form-item label="产品单位" prop="danwei">
           <el-input v-model="form.danwei" placeholder="请输入产品单位" />
         </el-form-item>
-        <el-form-item label="毛料名称" prop="originName">
-          <el-input v-model="form.originName" placeholder="请输入毛料名称" />
-        </el-form-item>
-        <el-form-item label="毛料规格" prop="originModel">
+<!--        <el-form-item label="毛料规格" prop="originModel">
           <el-input v-model="form.originModel" placeholder="请输入毛料规格" />
         </el-form-item>
         <el-form-item label="毛料尺寸" prop="originSize">
@@ -271,9 +179,9 @@
         </el-form-item>
         <el-form-item label="毛料单位" prop="originDanwei">
           <el-input v-model="form.originDanwei" placeholder="请输入毛料单位" />
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="入库时间" prop="storageTime">
-          <el-date-picker clearable
+          <el-date-picker clearable style="width: 100%"
             v-model="form.storageTime"
             type="datetime"
             value-format="yyyy-MM-dd HH:mm:ss"
@@ -286,9 +194,6 @@
         <el-form-item label="最高价格" prop="maxPrice">
           <el-input v-model="form.maxPrice" placeholder="请输入最高价格" />
         </el-form-item>
-        <el-form-item label="删除标志" prop="deleted">
-          <el-input v-model="form.deleted" placeholder="请输入删除标志" />
-        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -298,16 +203,66 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 选择员工信息 -->
+    <el-dialog title="双击选择毛料" :visible.sync="origin.open" width="900px" append-to-body top="6vh">
+      <div>
+        <el-form :model="origin.queryParams" :inline="true" label-width="70px">
+          <el-form-item label="毛料名称" prop="name" style="margin-bottom: 10px">
+            <el-input
+              v-model="origin.queryParams.name"
+              placeholder="请输入毛料名称"
+              clearablesize="small"
+              @keyup.enter.native="originQuery"
+            />
+          </el-form-item>
+          <el-form-item style="margin-bottom: 10px">
+            <el-button type="primary" icon="el-icon-search" size="small" @click="originQuery">搜索</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table border v-loading="origin.loading" :data="origin.list" @row-dblclick="originRowChange">
+          <el-table-column label="ID" align="center" prop="id"/>
+          <el-table-column label="毛料名称" align="center" prop="name" />
+          <el-table-column label="材料种类" align="center" prop="materialType" />
+          <el-table-column label="规格" align="center" prop="specification" />
+          <el-table-column label="尺寸" align="center" prop="size" />
+          <el-table-column label="单位" align="center" prop="unit" />
+        </el-table>
+
+        <pagination
+          v-show="origin.total>0"
+          :total="origin.total"
+          :page.sync="origin.queryParams.pageNum"
+          :limit.sync="origin.queryParams.pageSize"
+          @pagination="originQuery"
+        />
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="originCancel">取 消</el-button>
+        </div>
+      </div>
+
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { listProducts, getProducts, delProducts, addProducts, updateProducts } from "@/api/pay/products";
+import { listTenant } from "@/api/pay/tenant";
+import { listMaterial } from "@/api/pay/material";
 
 export default {
   name: "Products",
   data() {
     return {
+      // 公司信息
+      gsInfo:{
+        tenantName:'',
+        active_id:this.$store.state.user.tenantId,
+        list:[]
+      },
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -353,70 +308,67 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        id: [
-          { required: true, message: "主键不能为空", trigger: "blur" }
-        ],
-        tenantId: [
-          { required: true, message: "租户id不能为空", trigger: "blur" }
-        ],
-        materialId: [
-          { required: true, message: "毛料ID不能为空", trigger: "blur" }
-        ],
         productName: [
           { required: true, message: "产品名称不能为空", trigger: "blur" }
         ],
-        netMachineNo: [
-          { required: true, message: "网机编号不能为空", trigger: "blur" }
-        ],
-        drawingNum: [
-          { required: true, message: "图纸编号不能为空", trigger: "blur" }
-        ],
-        process: [
-          { required: true, message: "工序不能为空", trigger: "blur" }
-        ],
-        model: [
-          { required: true, message: "规格型号不能为空", trigger: "blur" }
-        ],
-        danwei: [
-          { required: true, message: "产品单位不能为空", trigger: "blur" }
-        ],
-        originName: [
-          { required: true, message: "毛料名称不能为空", trigger: "blur" }
-        ],
-        originModel: [
-          { required: true, message: "毛料规格不能为空", trigger: "blur" }
-        ],
-        originSize: [
-          { required: true, message: "毛料尺寸不能为空", trigger: "blur" }
-        ],
-        originDanwei: [
-          { required: true, message: "毛料单位不能为空", trigger: "blur" }
-        ],
-        storageTime: [
-          { required: true, message: "入库时间不能为空", trigger: "blur" }
-        ],
         minPrice: [
           { required: true, message: "最低价格不能为空", trigger: "blur" }
         ],
         maxPrice: [
           { required: true, message: "最高价格不能为空", trigger: "blur" }
-        ],
-        deleted: [
-          { required: true, message: "删除标志不能为空", trigger: "blur" }
-        ],
-        remark: [
-          { required: true, message: "备注不能为空", trigger: "blur" }
         ]
-      }
+      },
+      /** 选择毛料*/
+      origin: {
+        // 是否显示弹出层
+        open: false,
+        // 列表遮罩层
+        loading: true,
+        // 列表查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: undefined
+        },
+        // 表格数据
+        list: [],
+        // 总条数
+        total: 0,
+      },
     };
   },
   created() {
-    this.getList();
+    if (!this.$store.state.user.tenantId) {
+      this.getGsInfoList()
+    }else {
+      this.gsInfo.active_id = this.$store.state.user.tenantId
+      this.getList();
+    }
   },
   methods: {
+    // 获取左侧公司列表
+    getGsInfoList(){
+      listTenant({ name: this.gsInfo.tenantName }).then(response => {
+        if(response.rows.length>0){
+          this.gsInfo.list = response.rows;
+          this.gsInfo.active_id = this.gsInfo.list[0].id
+          this.getList()
+        }else{
+          this.$alert(`没有查到相关公司，暂无数据！`, `提示`, {
+            type: 'warning'
+          });
+        }
+      });
+    },
+    // 选择公司
+    changCompany(id){
+      this.gsInfo.active_id = id
+      this.getList()
+    },
     /** 查询产品列表 */
     getList() {
       this.loading = true;
+      this.queryParams.tenantId = this.gsInfo.active_id;
       listProducts(this.queryParams).then(response => {
         this.productsList = response.rows;
         this.total = response.total;
@@ -495,6 +447,7 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;
+          this.form.tenantId = this.gsInfo.active_id;
           if (this.form.id != null) {
             updateProducts(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
@@ -535,7 +488,76 @@ export default {
       this.download('pay/products/export', {
         ...this.queryParams
       }, `products_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 选择毛料
+    selectOrigin(){
+      this.origin.open = true;
+      this.origin.queryParams.pageNum = 1;
+      this.originQuery();
+    },
+    /** 员工列表查询 */
+    originQuery() {
+      this.origin.loading = true;
+      this.origin.queryParams.tenantId = this.gsInfo.active_id
+      listMaterial(this.origin.queryParams).then(response => {
+        this.origin.list = response.rows;
+        this.origin.total = response.total;
+        this.origin.loading = false;
+      });
+    },
+    /** 员工选择弹出框关闭*/
+    originCancel() {
+      this.origin.open = false
+    },
+    // 客户选择 选中数据
+    originRowChange(val) {
+      this.form.materialId = val.id;
+      this.form.originName = val.name;
+      this.form.originSize = val.size;
+      this.form.originDanwei = val.unit;
+      this.form.originModel = val.specification;
+      this.origin.open = false;
+    },
   }
 };
 </script>
+
+<style scoped lang="scss">
+.app-container {
+  display: flex;
+  .company {
+    border-radius: 5px;
+    width: 230px;
+    height: calc(100vh - 115px);
+    overflow-y: auto;
+    .cp-content {
+      margin-top: 20px;
+      .cp-item {
+        cursor: pointer;
+        padding: 6px 10px 6px 5px;
+        color: #424242;
+        font-size: 14px;
+        &:hover {
+          background: #f6f6f6;
+        }
+      }
+      .active{
+        background: #edf6ff;
+      }
+    }
+  }
+  .content{
+    padding-left: 15px;
+    width: calc(100% - 250px);
+    .el-button--medium {
+      padding: 2px 0px;
+    }
+  }
+  .content-all{
+    width: 100%;
+    .el-button--medium {
+      padding: 2px 0px;
+    }
+  }
+}
+</style>