官网新增服务预约管理功能

src/WebsiteManagement/serviceAppointMag/compents/dialogTemplate.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <el-dialog
+        :visible.sync="dialogVisible"
+        center
+        append-to-body
+        width="40%"
+        @close="onClose"
+        >
+      <template slot="title">
+        <div style="float: left">{{title}}</div>
+      </template>
+      <slot name="content"></slot>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onClose" class="normal-btn-width" size="mini">取 消</el-button>
+        <el-button type="primary" @click="onSubmit" class="normal-btn-width" size="mini" :disabled="disabled && title == '拒绝服务'" :loading="loading">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dialogTemplate",
+  props:["title","disabled"],
+  data(){
+    return {
+      dialogVisible:false,
+      loading:false
+    }
+  },
+  methods:{
+    onClose(){
+      this.dialogVisible = false
+      this.$emit('onClose')
+    },
+    onSubmit(){
+      this.$emit('onSubmit')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/WebsiteManagement/serviceAppointMag/compents/tableTemplate.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-input v-if="!hideSearch" style="width:200px;" placeholder="搜索" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
+    </el-input>
+    <tableDetailLayout style="margin-top: 10px" :layout="tablecols" :data="list" :opwidth="200" :width="true" :custom="true" :fixedName="'operation'" :height="height">
+      <template v-slot:customcol="scope">
+        {{ scope.column.data[[scope.column.columnname]] ? scope.column.data[[scope.column.columnname]] : '--' }}
+      </template>
+      <template v-slot:opreation="scope">
+        <slot name="detail"></slot>
+      </template>
+    </tableDetailLayout>
+    <div v-if="!hidePagination" class="container normal-panel" style="text-align:right">
+      <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="20"
+          layout="total,sizes, prev, pager, next, jumper"
+          :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CNCode",
+  props:['param','hideSearch','hidePagination','height','tablecols'],
+  data(){
+    return {
+      list:[],
+      total:0,
+      currentPage:0
+    }
+  },
+  methods:{
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.list = res.data
+      this.currentPage = res.pageNumber
+      this.total = res.total
+      this.$emit('listData',this.list)
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.param.content.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.param.content.pageNumber = val
+      this.listData()
+    },
+  },
+  mounted() {
+    this.listData()
+  },
+  created () {
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/WebsiteManagement/serviceAppointMag/detail/index.vue

@@ -6,19 +6,67 @@
         :turnPageId="20240902102903"
         idname="sa_endcustserviceorderid"
         :titleText="mainData.billno"
-        :tabs="['SN码','工单']"
+        :tabs="isShowSn?['服务商品','工单']:['工单']"
         @pageChange="pageChange">
+      <div slot="customOperation">
+        <transferService v-if="tool.checkAuth($route.name,'transferService') && mainData.status == '待处理'" btnTitle="转服务申请单" class="inline-16" message="确定将预约单转服务申请单吗" @onSuccess="queryMainData($route.query.id)" :data="mainData"></transferService>
+      </div>
+      <div slot="slot0" >
+        <tableTemplate v-if="isShowSn" :param="SNParam" height="calc(100vh - 380px)" :tablecols="SNTablecols" @listData="listData"></tableTemplate>
+        <tableTemplate v-else :param="workParam" height="calc(100vh - 380px)" :tablecols="workTablecols">
+          <template v-slot:detail="scope">
+            <el-button type="text" size="mini" class="inline-16" @click="goDetail(scope.data)">详 情</el-button>
+          </template>
+        </tableTemplate>
+      </div>
+      <div slot="slot1" >
+        <tableTemplate :param="workParam" height="calc(100vh - 380px)" :tablecols="workTablecols">
+          <template v-slot:detail="scope">
+            <el-button type="text" size="mini" class="inline-16" @click="goDetail(scope.data)">详 情</el-button>
+          </template>
+        </tableTemplate>
+      </div>
     </basicDetails>
   </div>
 </template>
 
 <script>
+import tableTemplate from "@/WebsiteManagement/serviceAppointMag/compents/tableTemplate";
+import transferService from "../modules/transferService";
 export default {
   name: "index",
+  components:{tableTemplate,transferService},
   data(){
     return {
       mainAreaData:{},
-      mainData:{}
+      mainData:{},
+      isShowSn:true,
+      SNParam:{
+        "id": "20240902134203",
+        "content": {
+          "siteid":JSON.parse(sessionStorage.getItem('active_account')).siteid,
+          "sa_endcustserviceorderid":this.$route.query.id,
+          "pageNumber":1,
+          "pageSize":50,
+          "where":{
+            "condition":""
+          }
+        }
+      },
+      SNTablecols:this.tool.tabelCol(this.$route.name)['SNCodeTable'].tablecols,
+      workParam:{
+        "id": "20240902102803",
+        "content": {
+          "siteid":JSON.parse(sessionStorage.getItem('active_account')).siteid,
+          "sa_endcustserviceorderid":this.$route.query.id,
+          "pageNumber":1,
+          "pageSize":50,
+          "where":{
+            "condition":""
+          }
+        }
+      },
+      workTablecols:this.tool.tabelCol(this.$route.name)['WorkBillTable'].tablecols,
     }
   },
   methods:{
@@ -31,6 +79,75 @@ export default {
         }
       })
       this.mainData = Object.assign({},this.mainData,res.data)
+      this.changeDataStructure()
+    },
+    changeDataStructure () {
+      let that = this
+      this.mainAreaData = [
+        {
+          label:'企业名称',
+          value: this.mainData.enterprisename
+        },
+        {
+          label:'联系人',
+          value: this.mainData.name
+        },
+        {
+          label:'联系电话',
+          value: this.mainData.phonenumber
+        },
+        {
+          label:'省市县',
+          value: this.mainData.province + '-' + this.mainData.county + '-' + this.mainData.city
+        },
+        {
+          label:'详细地址',
+          value: this.mainData.address
+        },
+        {
+          label:'提交人手机号',
+          value: this.mainData.scenecontactphonenumber
+        },
+        {
+          label:'状态',
+          value: this.mainData.status,
+          style:function () {
+            let style = {}
+            switch (that.mainData.status) {
+              case '待处理':
+                style = {color:'#d90a0a'}
+                break;
+              case '已确认':
+                style = {color:'#79da56'}
+                break;
+              case '服务中':
+                style = {color:'#1376e7'}
+                break;
+              default:
+                style = {color:'#151515'}
+                break;
+            }
+            return style
+
+          }
+        },
+        {
+          label:'服务类型',
+          value: this.mainData.servicetype
+        },
+        {
+          label:'应用系统',
+          value: this.mainData.class1
+        },
+        {
+          label:'客诉大类',
+          value: this.mainData.class2
+        },
+        {
+          label:'问题描述',
+          value: this.mainData.remarks
+        }
+      ]
     },
     // 监听切换数据,上一页,下一页
     pageChange (id,rowindex) {
@@ -38,9 +155,24 @@ export default {
       this.$router.replace({path:'/serviceAppointMagDetail',query:{id:id,rowindex:rowindex,portrait:''}})
       this.queryMainData(id)
     },
+    /*工单跳转*/
+    goDetail (scope) {
+      let route = this.$route
+      if (route.path !== '/workorderDetail') {
+        this.oldRoute = {path:route.path,query:route.query}
+        this.$store.dispatch('setHistoryRouter',this.oldRoute)
+      }
+      this.$router.replace({path:'/workorderDetail',query:{id:scope.data.sa_workorderid,rowindex:scope.data.rowindex}})
+    },
+    listData(data){
+      data.length > 0?this.isShowSn = true:this.isShowSn = false
+    }
   },
   mounted() {
     this.queryMainData(this.$route.query.id)
+  },
+  created() {
+    this.SNTablecols = this.tool.tabelCol(this.$route.name)['accountMoneyDetailTable'].tablecols
   }
 }
 </script>

src/WebsiteManagement/serviceAppointMag/modules/transferService.vue

@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <el-button type="primary" size="small" @click="open">{{btnTitle}}</el-button>
+    <dialogTemplate ref="dialogRef" :title="title" @onClose="onClose" @onSubmit="onSubmit" :disabled="backreason.length == 0">
+      <template slot="content">
+        <div v-if="title == '转服务申请单'">
+          <el-row :gutter="20">
+            <el-form :model="form" :rules="rules" ref="form" label-width="140px" label-position="right" size="mini">
+              <el-col :span="12">
+                <el-form-item label="企业名称:" prop="enterprisename" >
+                  <selectAgent :customParam="agentParam" ref="agent" @selectRow="agentChange" qiyi="企业名称">
+                    <el-input readonly type="text" slot="input" size="mini" @focus="$refs.agent.visible=true" v-model="form.enterprisename"></el-input>
+                  </selectAgent>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="服务类型" prop="servicetype">
+                  <el-select class="inline-24" v-model="form.servicetype" @change="classChange"  placeholder="请选择状态" size="mini" clearable>
+                    <el-option v-for="(item,index) in serveClassList" :key="index" :label="item.value" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" v-if="form.servicetype == '售中' || form.servicetype == '售后'">
+                <el-form-item label="订单号:" prop="sonum">
+                  <selectOrder :id="form.sys_enterpriseid" ref="order" @selectRow="orderChange">
+                    <el-input readonly :disabled="!form.sys_enterpriseid" type="text" slot="input" size="mini" @focus="$refs.order.listData(),$refs.order.visible=true" v-model="form.sonum"></el-input>
+                  </selectOrder>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="单据日期" prop="billdate">
+                  <el-date-picker
+                      v-model="form.billdate"
+                      type="date"
+                      value-format="yyyy-MM-dd"
+                      placeholder="选择日期">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="省市县" prop="province">
+                  <el-cascader
+                      size="mini"
+                      v-model="form.province"
+                      :options="basicData.data().areaData"
+                      ref="cascader">
+                  </el-cascader>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="地址" prop="address">
+                  <el-input v-model="form.address" placeholder="请输入地址"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="服务联系人" prop="scenecontact">
+                  <el-input v-model="form.scenecontact" placeholder="请输入服务联系人"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="联系人角色" prop="scenecontactrole">
+                  <el-input v-model="form.scenecontactrole" placeholder="请输入联系人角色"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="服务联系电话" prop="scenecontactphonenumber">
+                  <el-input v-model="form.scenecontactphonenumber" placeholder="请输入服务联系电话"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="应用系统" prop="class1">
+                  <el-select class="inline-24" v-model="form.class1" @change="classChange" placeholder="请选择应用系统" size="mini" clearable>
+                    <el-option v-for="(item,index) in systemapp" :key="index" :label="item.value" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="客诉大类" prop="class2">
+                  <el-select class="inline-24" v-model="form.class2" @change="classChange" placeholder="请选择客诉大类" size="mini" clearable>
+                    <el-option v-for="(item,index) in customerclass" :key="index" :label="item.value" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="申请原因" prop="reason">
+                  <el-input v-model="form.reason" placeholder="请输入申请原因"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="需求服务开始日期" prop="begdate">
+                  <el-date-picker
+                      v-model="form.begdate"
+                      type="date"
+                      value-format="yyyy-MM-dd"
+                      placeholder="选择日期">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="需求服务结束日期" prop="enddate">
+                  <el-date-picker
+                      v-model="form.enddate"
+                      type="date"
+                      value-format="yyyy-MM-dd"
+                      placeholder="选择日期">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="备注" prop="remarks">
+                  <el-input type="textarea" v-model="form.remarks" placeholder="请输入备注"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-form>
+          </el-row>
+        </div>
+        <div v-else>
+          <el-input style="margin-top: 10px" type="textarea" v-model="backreason" placeholder="填写拒绝原因" ></el-input>
+        </div>
+      </template>
+    </dialogTemplate>
+  </div>
+</template>
+
+<script>
+import dialogTemplate from "@/WebsiteManagement/serviceAppointMag/compents/dialogTemplate";
+import selectAgent from '@/template/selectAgent/index'
+export default {
+  name: "transferService",
+  props:['btnTitle','message','data'],
+  components:{dialogTemplate,selectAgent},
+  data(){
+    return {
+      dialogVisible:false,
+      title:'',
+      form:{
+        "sa_serviceorderid":0,     //sa_brandid<=0时 为新增
+        "servicetype":"",
+        "sa_orderid":0,
+        "sonum":"",
+        "sys_enterpriseid":'',
+        "enterprisename":'',
+        "remarks":"",
+        "class1":"",
+        "class2":"",
+        "reason":"",
+        "province":"",
+        "city":"",
+        "county":"",
+        "address":"",
+        "scenecontact":"",
+        "scenecontactrole":"",
+        "scenecontactphonenumber":"",
+        "billdate":`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
+        "begdate":"",
+        "enddate":""
+      },
+      rules:{
+        servicetype:[
+          { required: true, message: '请选择服务类型', trigger: 'change'},
+        ],
+        enterprisename:[
+          { required: true, message: '请选择经销商', trigger: 'change'}
+        ],
+        sonum:[
+          { required: true, message: '请选择订单', trigger: 'change'},
+        ],
+        scenecontactphonenumber: [
+          { required: true, message: '请填写手机号码', trigger: 'blur'},
+          { pattern:/^1[3-9][0-9]\d{8}$/, message: '请输入正确手机号码',trigger: 'blur' }
+        ],
+        province:[
+          { required: true, message: '请选择省市县', trigger: 'change'},
+        ],
+        address:[
+          { required: true, message: '请填写地址', trigger: 'blur'},
+        ],
+        scenecontact:[
+          { required: true, message: '服务联系人', trigger: 'blur'},
+        ],
+        scenecontactrole:[
+          { required: true, message: '联系人角色', trigger: 'blur'},
+        ],
+        class1:[
+          { required: true, message: '应用系统', trigger: 'change'},
+        ],
+        class2:[
+          { required: true, message: '客诉大类', trigger: 'change'},
+        ],
+        reason:[
+          { required: true, message: '申请原因', trigger: 'blur'},
+        ],
+        begdate:[
+          { required: true, message: '需求服务开始日期', trigger: 'change'},
+        ],
+        enddate:[
+          { required: true, message: '需求服务结束日期', trigger: 'change'},
+        ],
+      },
+      agentParam: {
+        "id":20220920083901,
+        "content": {
+          "pageNumber":1,
+          "pageSize":20,
+          "where": {
+            condition:'',
+            type:''
+          }
+        }
+      },
+      backreason:'',
+      disabled:false,
+      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid,
+      serveClassList:[],
+      customerclass:[],
+      systemapp:[],
+    }
+  },
+  methods:{
+    open() {
+      this.$confirm(this.message + '?', '确认信息', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确认',
+        cancelButtonText: '拒绝'
+      })
+          .then(async() => {
+            this.title = '转服务申请单'
+            console.log(this.data,'data====')
+            this.form = Object.assign({},this.form,this.data)
+            console.log(this.form,'form')
+            this.$refs.dialogRef.dialogVisible = true
+            this.getServeClass()
+            const res = await this.$store.dispatch('optiontypeselect','customerclass')
+            this.customerclass = res.data
+            const res1 = await this.$store.dispatch('optiontypeselect','systemapp')
+            this.systemapp = res1.data
+          })
+          .catch(action => {
+            if (action === 'cancel'){
+              this.title = '拒绝服务'
+              this.disabled = true
+              this.$refs.dialogRef.dialogVisible = true
+            }
+          });
+    },
+    onSubmit(){
+      if (this.title == '拒绝服务') {
+        this.onRefuse()
+      }else {
+        this.$refs.form.validate(async (valid)=>{
+          if (!valid) return false
+          this.$refs.dialogRef.loading = true
+          const res = await this.$api.requested({
+            "id": "20240903093303",
+            "content": {
+              "siteid":this.siteid,
+              "sa_endcustserviceorderid":this.$route.query.id,
+              "sys_enterpriseid":this.form.sys_enterpriseid //服务预约单中sys_enterpriseid为0时，此时sys_enterpriseid必传
+            }
+          })
+          this.tool.showMessage(res,()=>{
+            this.$refs.dialogRef.loading = false
+            this.$refs.dialogRef.dialogVisible = false
+            this.$emit('onSuccess')
+          })
+        })
+      }
+    },
+    async onRefuse(){
+      this.$refs.dialogRef.loading = true
+      const res = await this.$api.requested({
+        "id": "20240903093203",
+        "content": {
+          "siteid":this.siteid,
+          "sa_endcustserviceorderid":this.$route.query.id,
+          "backreason":this.backreason
+        }
+      })
+      this.tool.showMessage(res,()=>{
+        this.$refs.dialogRef.loading = false
+        this.$refs.dialogRef.dialogVisible = false
+        this.$emit('onSuccess')
+      })
+    },
+    inputChange(){
+      console.log(this.backreason)
+      this.backreason.length > 0 ? this.disabled = false:this.disabled = true
+    },
+    onClose(){
+      this.backreason = ''
+    },
+    agentChange (data) {
+      console.log(data);
+      this.form.sys_enterpriseid = data.sys_enterpriseid
+      this.form.enterprisename = data.enterprisename
+      this.$refs.agent.visible = false
+
+      this.form.sa_orderid = 0
+      this.form.sonum = ''
+    },
+    async getServeClass () {
+      let res = await this.$api.requested({
+        "id":20230206112003,
+        "content": {
+        }
+      })
+      this.serveClassList = res.data
+      console.log(this.serveClassList);
+    },
+    orderChange (data) {
+      console.log(data);
+
+      this.form.sa_orderid = data.sa_orderid
+      this.form.sonum = data.sonum
+      this.$refs.order.visible = false
+      console.log(this.form.sonum);
+
+    },
+    classChange () {
+      if (this.form.servicetype == '售中' || this.form.servicetype == '售后') {
+        this.$refs.agent.param.content.sys_enterpriseid = this.form.sys_enterpriseid
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -20,6 +20,7 @@ import tableLayout from './components/dynamic-table'
 import tableNewLayout from './components/dynamic-newTable'
 import basicLayout from './components/normal-basic-layout'
 import tableMainLayout from './template/tableMainLayout'
+import tableDetailLayout from './template/tableDetailLayout'
 import normalLayout from './components/normal-basic-layout/normal.vue'
 import basicDetails from './components/normal-basic-layout/details'
 import deleteBtn from './components/delete_btn/index'
@@ -62,6 +63,8 @@ Vue.component('tableNewLayout',tableNewLayout)
 
 Vue.component('tableMainLayout',tableMainLayout)
 
+Vue.component('tableDetailLayout',tableDetailLayout)
+
 Vue.component('basicLayout', basicLayout)
 
 Vue.component('basicDetails', basicDetails)

src/template/tableDetailLayout/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="bs-table" >
+    <el-table border stripe ref="tables" :row-class-name="tableClassName" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}" :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"  highlight-current-row :data="data" size="mini" @row-click="rowClick" :height="height" @selection-change="handleSelectionChange" >
+      <el-table-column
+          type="selection"
+          v-if="isCheck === true"
+          width="45"
+          align="center"
+          @handleSelectionChange="handleSelectionChange">
+      </el-table-column>
+      <el-table-column show-overflow-tooltip v-for="(col) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title"  :min-width="col.width === 0 ? 150 : col.width" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?redirect ? redirect : 'right' :false : false">
+        <template slot-scope="scope">
+
+          <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
+
+          <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex"
+export default {
+  /*
+    layout:表结构数据;
+    data:表渲染数据;
+    custom:是否启用自定义结构;
+    opwidth:操作列宽度
+  */
+  props:['data','tableName','custom','layout','fixRightData','fixLeftData','height','fixedName','redirect','isCheck','height'],
+  data () {
+    return {
+      list:[],
+      act_column:'',
+      value:'',
+      show:false
+    }
+  },
+  computed:{
+    ...mapGetters({
+      loading:'loading'
+    })
+  },
+  watch:{
+    tableName () {
+      this.$nextTick(() => {
+        this.$refs.tables.doLayout()
+      });
+    },
+    data(){
+      this.$nextTick(() => {
+        this.$refs.tables.doLayout()
+      });
+    }
+  },
+  methods:{
+    rowClick (row) {
+      this.$emit('rowClick',row)
+    },
+    tableClassName ({row,rowIndex}) {
+      row.index = rowIndex
+    },
+    handleSelectionChange(val) {
+      this.$emit('checkboxCallBack',val)
+    },
+    checkFixed (columnname) {
+      let isRight = this.fixRightData.some(item=>item === columnname)
+      let isLeft = this.fixLeftData.some(item=>item === columnname)
+      if (isRight) return 'right'
+      if (isLeft) return 'left'
+    },
+    headerSearch (columnname) {
+      this.show = false
+      this.$emit('headerSearch',columnname,this.value)
+    },
+    inputChange (val) {
+      this.value = val
+    }
+  },
+  mounted () {
+  }
+}
+
+</script>
+<style>
+/* .bs-table .el-table {
+  display: flex;
+  flex-direction: column;
+} */
+</style>
+<style scoped>
+.search-icon:hover{
+  font-weight: bold;
+  background: #f1f2f3;
+  cursor: pointer;
+}
+
+/deep/.ellipsis {
+  display:-webkit-box;
+  text-overflow:ellipsis;
+  overflow:hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient:vertical;
+}
+
+/deep/.el-table--mini .el-table__cell {
+  padding: 0 !important;
+}
+/deep/.el-table .el-table__cell {
+  padding: 0 !important;
+}
+</style>