stage：代发企业管理-列表展示优化

src/views/business/taxUnit/index.vue

@@ -2,20 +2,10 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="单位名称" prop="unitName">
-        <el-input
-          v-model="queryParams.unitName"
-          placeholder="请输入单位名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.unitName" placeholder="请输入单位名称" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="信用代码" prop="unitCode">
-        <el-input
-          v-model="queryParams.unitCode"
-          placeholder="请输入信用代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.unitCode" 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>
@@ -25,24 +15,13 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['business:unitInfo:add']"
-        >新增
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['business:unitInfo:add']">新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['business:unitInfo:remove']"
-        >删除
+        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['business:unitInfo:remove']">删除
         </el-button>
       </el-col>
       <!--      <el-col :span="1.5">-->
@@ -58,100 +37,70 @@
     </el-row>
 
     <el-table v-loading="loading" :data="unitInfoList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="企业名称" align="center" prop="unitName" fixed/>
-      <el-table-column label="信用代码" align="center" prop="unitCode" fixed/>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="企业名称" align="center" prop="unitName" fixed />
+      <el-table-column label="信用代码" align="center" prop="unitCode" fixed />
       <el-table-column label="所属行业" align="center" prop="sectorDictDataVal">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.unit_business_type" :value="scope.row.sectorDictDataVal"/>
+          <dict-tag :options="dict.type.unit_business_type" :value="scope.row.sectorDictDataVal" />
+        </template>
+      </el-table-column>
+      <el-table-column label="法人姓名" align="center" prop="legalPersonName" />
+      <el-table-column label="法人联系电话" align="center" prop="legalPersonMobile" />
+      <el-table-column label="所属地址" align="center" prop="address">
+        <template slot-scope="scope">
+          <el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top">
+            <p class="addressStyle">{{ scope.row.address }}</p>
+          </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column label="法人姓名" align="center" prop="legalPersonName"/>
-      <el-table-column label="法人联系电话" align="center" prop="legalPersonMobile"/>
-      <el-table-column label="所属地址" align="center" prop="address"/>
       <el-table-column label="可开票状态" align="center" prop="invoiceStatus">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.tax_invoice_status" :value="scope.row.invoiceStatus"/>
+          <dict-tag :options="dict.type.tax_invoice_status" :value="scope.row.invoiceStatus" />
         </template>
       </el-table-column>
-      <el-table-column label="月开票额度" align="center" prop="invoiceLimit"/>
+      <el-table-column label="月开票额度" align="center" prop="invoiceLimit" />
       <el-table-column label="可开票类型" align="center" prop="invoiceTypes">
         <template slot-scope="scope">
-          <dict-tag style="margin-top: 3px" v-for="(item, index) in scope.row.invoiceTypes.split(',')"
-                    :options="dict.type.tax_invoice_type" :value="item"
-          />
+          <dict-tag style="margin-top: 3px" v-for="(item, index) in scope.row.invoiceTypes.split(',')" :key="index"
+            :options="dict.type.tax_invoice_type" :value="item" />
         </template>
       </el-table-column>
       <el-table-column label="可开票类目" align="center" prop="invoiceTypes">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-info"
-            @click="viewUnitTaxCategories(scope.row)"
-          >查看类目
+          <el-button size="mini" type="text" icon="el-icon-info" @click="viewUnitTaxCategories(scope.row)">查看类目
           </el-button>
         </template>
       </el-table-column>
       <!--      <el-table-column label="营业执照" align="center" prop="businessLicense" />-->
       <el-table-column label="企业状态" align="center" prop="useStatus">
         <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.useStatus"
-            :active-value="1"
-            :inactive-value="2"
-            @change="setUnitUseStatus(scope.row)"
-          >
+          <el-switch v-model="scope.row.useStatus" :active-value="1" :inactive-value="2"
+            @change="setUnitUseStatus(scope.row)">
           </el-switch>
         </template>
       </el-table-column>
       <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="['business:unitInfo:edit']"
-          >修改
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['business:unitInfo:edit']">修改
           </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['business:unitInfo:remove']"
-          >删除
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['business:unitInfo: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" />
     <el-dialog :title="taxCategoryPanel.title" :visible.sync="taxCategoryPanel.open" width="600px" append-to-body>
       <el-table :data="taxCategoryPanel.data" stripe style="width: 100%">
-        <el-table-column
-          prop="goodsName"
-          label="类目名称"
-          width="180"
-        >
+        <el-table-column prop="goodsName" label="类目名称" width="180">
         </el-table-column>
-        <el-table-column
-          prop="code"
-          label="类目编码"
-          width="180"
-        >
+        <el-table-column prop="code" label="类目编码" width="180">
         </el-table-column>
-        <el-table-column
-          prop="vatRate"
-          label="税率"
-        >
+        <el-table-column prop="vatRate" label="税率">
         </el-table-column>
       </el-table>
       <div slot="footer" class="dialog-footer">
@@ -243,7 +192,7 @@ export default {
                 });
                 done()
               }
-            }).catch(function() {
+            }).catch(function () {
               instance.confirmButtonLoading = false;
               unitRow.useStatus = unitRow.useStatus === 1 ? 2 : 1
               done()
@@ -252,7 +201,7 @@ export default {
             done()
           }
         }
-      }).catch(function() {
+      }).catch(function () {
         unitRow.useStatus = unitRow.useStatus === 1 ? 2 : 1
         this.$message({
           type: 'info',
@@ -310,7 +259,7 @@ export default {
     handleDelete(row) {
       const ids = row.id || this.ids
       const unitNames = row.unitName || this.unitNames
-      this.$modal.confirm('确认删除以下企业信息:' + unitNames + '?').then(function() {
+      this.$modal.confirm('确认删除以下企业信息:' + unitNames + '?').then(function () {
         return delUnitInfo(ids)
       }).then(() => {
         this.getList()
@@ -327,3 +276,10 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.addressStyle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
\ No newline at end of file