白名单样式优化

3 weeks ago · 7ae6cb0d0d
6 changed files with 157 additions and 66 deletions
--- a/src/views/assetManage/assetWhitelist/index.vue
+++ b/src/views/assetManage/assetWhitelist/index.vue
@ -23,8 +23,8 @@
    <div class="container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
-      <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 330px)" :data="crud.data" @row-dblclick="handleRowDblClick" @selection-change="crud.selectionChangeHandler">
-        <el-table-column type="selection" width="55" />
+      <el-table ref="table" v-loading="crud.loading" :header-cell-class-name="headerCellClassName" :cell-class-name="cellClassName" highlight-current-row style="width: 100%;" height="calc(100vh - 330px)" :data="crud.data" @row-dblclick="handleRowDblClick" @selection-change="crud.selectionChangeHandler">
+        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="mark" label="资产编号" min-width="180px" :show-overflow-tooltip="true" />
        <el-table-column prop="name" label="资产名称" min-width="180px" :show-overflow-tooltip="true" />
        <el-table-column prop="capitaltyepname" label="资产类型" width="80px" :show-overflow-tooltip="true" />
@ -40,8 +40,16 @@
            <div>{{ scope.row.whiteCreateTime | parseTime }}</div>
          </template>
        </el-table-column>
-        <el-table-column prop="whiteLastname" label="操作人" />
-        <el-table-column prop="whiteRemark" label="备注" :show-overflow-tooltip="true" />
+        <el-table-column prop="whiteLastname" label="操作人">
+          <template slot-scope="scope">
+            <div>{{ scope.row.whiteLastname || '——' }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="whiteRemark" label="备注" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <div>{{ scope.row.whiteRemark || '——' }}</div>
+          </template>
+        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination v-if="crud.data.length!==0" />
@ -54,7 +62,8 @@
      <div class="setting-dialog">
        <div class="detail-tab tab-content">
          <div class="detail-check">
-            <ul class="book-detail">
+            <div style="flex: 1;">
+              <ul class="book-detail asset-detail">
                <li><span>资产编号：</span>{{ selectedAsset && selectedAsset.mark }}</li>
                <li><span>资产名称：</span>{{ selectedAsset && selectedAsset.name }}</li>
                <li><span>资产类型：</span>{{ selectedAsset && selectedAsset.capitaltyepname || '——' }}</li>
@ -78,6 +87,12 @@
                <li><span>入账日期：</span>{{ selectedAsset && selectedAsset.rzrq | parseTime }}</li>
                <li><span>保修截至日期：</span>{{ selectedAsset && selectedAsset.bxjzrq | parseTime }}</li>
              </ul>
+              <ul class="book-detail white-detail">
+                <li class="white-item"><span>加入时间：</span>{{ selectedAsset && selectedAsset.whiteCreateTime | parseTime }}</li>
+                <li class="white-item"><span>操作人：</span>{{ selectedAsset && selectedAsset.whiteLastname || '——' }}</li>
+                <li class="white-item"><span>备注：</span>{{ selectedAsset && selectedAsset.whiteRemark || '——' }}</li>
+              </ul>
+            </div>
            <!-- 资产图片列表（竖向滚动 + 删除按钮） -->
            <div class="asset-image-wrapper">
              <div v-if="assetImageList.length > 0" class="asset-image-scroll">
@ -226,7 +241,27 @@ export default {
  mounted() {
  },
  methods: {
+    // 数据单元格样式
+    cellClassName({ row, column, rowIndex, columnIndex }) {
+      const whiteFields = ['whiteCreateTime', 'whiteLastname', 'whiteRemark']
+      if (whiteFields.includes(column.property)) {
+        return 'white-list-cell'
+      }
+      return ''
+    },
+    // 表头单元格样式
+    headerCellClassName({ row, column, rowIndex, columnIndex }) {
+      const whiteFields = ['whiteCreateTime', 'whiteLastname', 'whiteRemark']
+      if (whiteFields.includes(column.property)) {
+        return 'white-list-header-cell'
+      }
+      return ''
+    },
+
    [CRUD.HOOK.beforeRefresh]() {
+      if (this.crud.query.search) {
+        this.crud.query.search = this.crud.query.search.trim()
+      }
      this.crud.params.isWhite = true
      // 保存原始参数
      this.originalPage = this.crud.page.page
@ -266,14 +301,21 @@ export default {
      return Number(money).toLocaleString('en-US')
    },
    // 处理行双击事件
+    // 处理行双击事件
    handleRowDblClick(row) {
      this.detailDialogVisible = true
      this.selectedAsset = {}
      this.assetImageList = []
      const params = { mark: row.mark }
      FetchAssetInfoDetailsByMark(params).then(res => {
-        this.selectedAsset = res || row
-        const photoList = res.assetInfoPhoto || []
+        // 合并详情接口数据 + 列表行的白名单字段
+        this.selectedAsset = {
+          ...(res || {}),
+          whiteCreateTime: row.whiteCreateTime,
+          whiteLastname: row.whiteLastname,
+          whiteRemark: row.whiteRemark
+        }
+        const photoList = res?.assetInfoPhoto || []
        this.assetImageList = photoList.map(item => ({
          id: item.id,
          photoUrl: item.photoUrl,
@ -311,7 +353,7 @@ export default {
      this.addDialogLoading = true
      try {
        const res = await FetchInitAssetInfo({
-          search: this.addSearch,
+          search: this.addSearch.trim(),
          pageNo: this.addPage.pageNo,
          pageSize: this.addPage.pageSize
        })
@ -552,8 +594,9 @@ export default {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
-    padding: 20px 30px;
+    padding: 12px 30px;
    background-color: #F6F8FC;
+    overflow: hidden;
  }
  .book-detail{
    display: flex;
@ -575,6 +618,17 @@ export default {
      &.row-li{
        width: 100%
      }
+      &.white-item {
+        color: #606266;
+        span {
+          color: #0348F3 !important;
+        }
+      }
+    }
+    &.white-detail{
+      border-radius: 4px;
+      background-color: #EEF5FE;
+      margin-top: 4px;
    }
  }
  ::v-deep .dialog-footer{
@ -587,4 +641,13 @@ export default {
 ::v-deep .el-table__fixed-right{
  background-color: #fff !important;
 }
+// 数据行单元格
+::v-deep .white-list-cell {
+  // background-color: #EAF3FB !important;
+  color: #0348F3 !important;
+}
+// 表头单元格
+::v-deep .white-list-header-cell {
+  background-color: #EAF3FB !important;
+}
 </style>
--- a/src/views/assetManage/errorLog/index.vue
+++ b/src/views/assetManage/errorLog/index.vue
@ -167,7 +167,7 @@ export default {
      delete this.crud.query.billNo
      delete this.crud.query.manageType
      this.crud.query.isImportant = false
-      this.crud.query.search = this.query.search
+      this.crud.query.search = this.query.search.trim()
      // 状态筛选
      this.crud.params.manageType = this.query.manageType

--- a/src/views/assetManage/importantLog/index.vue
+++ b/src/views/assetManage/importantLog/index.vue
@ -167,7 +167,7 @@ export default {
      delete this.crud.query.billNo
      delete this.crud.query.manageType
      this.crud.query.isImportant = true
-      this.crud.query.search = this.query.search
+      this.crud.query.search = this.query.search.trim()
      // 状态筛选
      this.crud.params.manageType = this.query.manageType

--- a/src/views/assetManage/inOutLog/index.vue
+++ b/src/views/assetManage/inOutLog/index.vue
@ -319,7 +319,7 @@ export default {
      delete this.crud.query.manageType

      // 输入框统一作为 单号 billNo 搜索
-      this.crud.query.billNo = this.keyWord
+      this.crud.query.billNo = this.keyWord.trim()

      // 下拉框选择 出入库类型 manageType
      if (this.optionVal) {
--- a/src/views/assetManage/inventory/index.vue
+++ b/src/views/assetManage/inventory/index.vue
@ -98,6 +98,7 @@
          </ul> -->
          <!-- v-if="tabIndex===0" -->
          <div class="detail-check">
+            <div style="flex:1">
              <ul class="book-detail">
                <li><span>资产编号：</span>{{ selectedAsset && selectedAsset.mark }}</li>
                <li><span>资产名称：</span>{{ selectedAsset && selectedAsset.name }}</li>
@ -126,6 +127,12 @@
              <!-- <li v-if="selectedAsset && selectedAsset.rzrq !== null"><span>更新时间：</span>{{ selectedAsset &&selectedAsset.rzrq | parseTime }}</li>
              <li v-else><span>更新时间：</span>——</li> -->
              </ul>
+              <ul v-if="selectedAsset && selectedAsset.is_whitelist" class="book-detail white-detail">
+                <li class="white-item"><span>加入时间：</span>{{ selectedAsset && selectedAsset.whiteCreateTime | parseTime }}</li>
+                <li class="white-item"><span>操作人：</span>{{ selectedAsset && selectedAsset.whiteLastname || '——' }}</li>
+                <li class="white-item"><span>备注：</span>{{ selectedAsset && selectedAsset.whiteRemark || '——' }}</li>
+              </ul>
+            </div>
            <!-- <img src="http://192.168.99.72:15000/api/minio/getImg?bucket=2&fileName=2b532fd6792f4dbe91d6a1dbf15e4738.jpg" alt="资产图片"> -->
            <!-- <div :class="selectedAsset && selectedAsset.imageUrl ? 'asset-image asset-img' : 'asset-image default-img'">
              <img :src="selectedAsset && selectedAsset.imageUrl || require('@/assets/images/system/default-img2.png')" alt="资产图片">
@ -217,6 +224,9 @@ export default {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
+      if (this.crud.query.search) {
+        this.crud.query.search = this.crud.query.search.trim()
+      }
      // 保存原始参数
      this.originalPage = this.crud.page.page
      this.originalSize = this.crud.page.size
@ -352,7 +362,13 @@ export default {
      // })

      FetchAssetInfoDetailsByMark(params).then(res => {
-        this.selectedAsset = res || row
+        this.selectedAsset = {
+          ...(res || {}),
+          is_whitelist: row.is_whitelist,
+          whiteCreateTime: row.whiteCreateTime,
+          whiteLastname: row.whiteLastname,
+          whiteRemark: row.whiteRemark
+        }
        const photoList = res.assetInfoPhoto || []
        this.assetImageList = photoList.map(item => ({
          id: item.id,
@ -599,8 +615,9 @@ export default {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
-    padding: 20px 30px;
+    padding: 12px 30px;
    background-color: #F6F8FC;
+    overflow: hidden;
  }
  .book-detail{
    display: flex;
@ -622,6 +639,17 @@ export default {
      &.row-li{
        width: 100%
      }
+      &.white-item {
+        color: #606266;
+        span {
+          color: #0348F3 !important;
+        }
+      }
+    }
+    &.white-detail{
+      border-radius: 4px;
+      background-color: #EEF5FE;
+      margin-top: 4px;
    }
  }
  ::v-deep .dialog-footer{
--- a/src/views/assetManage/stocktaking/index.vue
+++ b/src/views/assetManage/stocktaking/index.vue
@ -529,7 +529,7 @@ export default {
    [CRUD.HOOK.beforeRefresh]() {
      // 传递搜索参数
      // console.log('this.user', this.user)
-      this.crud.params.billNo = this.query.billNo
+      this.crud.params.billNo = this.query.billNo.trim()
      this.crud.params.warehouseId = this.query.warehouseId
      this.crud.params.status = this.query.status
      this.crud.query.userId = this.user.id
@ -684,10 +684,10 @@ export default {
    },
    doSearch() {
      if (this.optionVal === 'assetMark') {
-        this.assetMark = this.keyWord
+        this.assetMark = this.keyWord.trim()
        this.assetName = ''
      } else {
-        this.assetName = this.keyWord
+        this.assetName = this.keyWord.trim()
        this.assetMark = ''
      }
      this.inventoryPage = 1