style(sass): 调整按钮样式和表格样式

- 更新了按钮的禁用状态样式- 调整了表格的单元格样式
- 优化了查询表单的布局和样式- 修复了一些样式相关的问题

src/assets/sass/renderSass/button.scss

@@ -52,6 +52,13 @@
       & i {
         color: #000;
       }
+      &.is-disabled {
+        background: unset;
+        color: #eee;
+        & i {
+          color: #eee;
+        }
+      }
     }
     &.popver-button + .popver-button {
       margin: 0;
@@ -195,10 +202,25 @@
   flex-direction: column;
   margin-left: 5px;
   border-radius: 5px;
-  padding: 5px;
-  //& .el-button {
-  //  &.normal-button {
-  //    padding: 17px 0;
-  //  }
-  //}
+  //padding: 5px;
+  & .el-button {
+    &.normal-button {
+      padding: 17px 5px;
+    }
+    &.more-btn {
+      padding: 5px;
+    }
+  }
+}
+.el-radio-button {
+  &:focus {
+    &:not(.is-focus) {
+      &:not(:active) {
+        &:not(.is-disabled) {
+          //box-shadow: 0 0 2px 2px $--color-primary;
+          box-shadow: unset;
+        }
+      }
+    }
+  }
 }

src/assets/sass/renderSass/table.scss

@@ -1,10 +1,15 @@
 .el-table--small {
-  td,
-  th {
-    padding: 10px 0;
+  & td,
+  & th {
+    padding: 14px 0;
+  }
+}
+.el-table {
+  & td,
+  & th {
+    padding: 14px 0;
   }
 }
-
 .el-table__header-wrapper {
   .el-table__header {
     th {

src/components/RenderTable/component/bodySlot/index.vue

@@ -44,7 +44,7 @@ const RenderSlot = {
                   type: 'text',
                   icon: 'el-icon-more'
                 },
-                class: 'normal-button'
+                class: 'normal-button more-btn'
               })
           }
         },
@@ -69,10 +69,12 @@ const RenderSlot = {
         first[0].data.props.type = null
         first[0].data.props.size = null
         other.forEach(item => {
+          // item.data.class = 'normal-button '
           item.data.class = 'normal-button popver-button'
         })
 
         content.children = [renderTooltip(first), renderPopver(other)]
+        // content.children = [renderTooltip(first), ...other]
         return content
       } else {
         // const first = contentDiv.splice(0, contentDiv)

src/views/rules/Index.vue

@@ -35,13 +35,24 @@ export default {
             render: (h, params) => {
               return h('div', [
                 h('el-button', {
-                  props: { type: 'text', size: 'mini', icon: 'el-icon-tickets', title: '查看详情' },
+                  props: {
+                    type: 'text',
+                    size: 'mini',
+                    icon: 'el-icon-tickets',
+                    title: '查看详情'
+                  },
                   on: { click: () => this.handleInfoVisible(params.row) }
                 }),
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini', icon: 'el-icon-edit-outline', title: '修改' },
+                    props: {
+                      type: 'text',
+                      size: 'mini',
+                      icon: 'el-icon-edit-outline',
+                      title: '修改'
+                    },
+                    class: 'normal-button',
                     on: { click: () => this.handleEdit(params.row) }
                   },
                   '修改'
@@ -49,8 +60,16 @@ export default {
                 h(
                   'el-button',
                   {
-                    props: { type: 'danger', size: 'mini', icon: 'el-icon-delete', title: '删除' },
-                    on: { click: () => this.handleDelete(params.row, params.index) }
+                    props: {
+                      type: 'danger',
+                      size: 'mini',
+                      icon: 'el-icon-delete',
+                      title: '删除'
+                    },
+                    class: 'normal-button',
+                    on: {
+                      click: () => this.handleDelete(params.row, params.index)
+                    }
                   },
                   '删除'
                 )
@@ -95,7 +114,9 @@ export default {
       if (!this.form.createdDate.length) return ''
 
       return this.form.createdDate.map((date, index) => {
-        return `${new Date(date).getFullYear()}-${String(new Date(date).getMonth() + 1).padStart(2, '0')}-${String(new Date(date).getDate()).padStart(
+        return `${new Date(date).getFullYear()}-${String(
+          new Date(date).getMonth() + 1
+        ).padStart(2, '0')}-${String(new Date(date).getDate()).padStart(
           2,
           '0'
         )} ${index === 0 ? '00:00:00' : '23:59:59'}`
@@ -104,7 +125,7 @@ export default {
   },
   watch: {
     form: {
-      handler() { },
+      handler() {},
       deep: true
     }
   },
@@ -127,8 +148,10 @@ export default {
         pageSize: this.tableConfig.pageSize,
         ruleType: this.form.ruleType,
         ruleNameLike: this.form.ruleName,
-        startCreatedDate: this.formattedDate.length > 1 ? this.formattedDate[0] : '',
-        endCreatedDate: this.formattedDate.length > 1 ? this.formattedDate[1] : ''
+        startCreatedDate:
+          this.formattedDate.length > 1 ? this.formattedDate[0] : '',
+        endCreatedDate:
+          this.formattedDate.length > 1 ? this.formattedDate[1] : ''
         // times: this.formattedDate
       }
 
@@ -156,7 +179,8 @@ export default {
     // 处理修改规则
     handleEdit(row, isPreview = false) {
       console.log(`isPreview`, isPreview)
-      this.dialogOptions.currentComponent = row.ruleType === 1 ? 'EditSplitRule' : 'EditPromptRule'
+      this.dialogOptions.currentComponent =
+        row.ruleType === 1 ? 'EditSplitRule' : 'EditPromptRule'
 
       if (this.dialogOptions.currentComponent === 'EditPromptRule') {
         this.$nextTick(() => {
@@ -189,7 +213,11 @@ export default {
           .catch(err => {
             this.$notify.error({
               title: '删除失败',
-              message: h('i', { style: 'color: teal' }, '删除时出现错误，稍后再试' + err)
+              message: h(
+                'i',
+                { style: 'color: teal' },
+                '删除时出现错误，稍后再试' + err
+              )
             })
           })
       })
@@ -230,57 +258,99 @@ export default {
 
 <template>
   <div class="rules-container render-container">
-    <div class="card-body">
-      <el-form :model="form" label-width="100px" size="small">
+    <div class="card-body flex justify-content-b">
+      <el-form
+        :model="form"
+        label-width="100px"
+        size="small"
+        label-position="top"
+        inline
+      >
         <!-- 查询条件 -->
-        <el-row>
-          <!-- 规则类型 -->
-          <el-col :span="7">
-            <el-form-item label="规则类型">
-              <el-select v-model="form.ruleType" placeholder="请选择规则类型">
-                <el-option label="全部规则" value="">全部规则</el-option>
-                <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item"
-                  :value="reverseRuleType(item)" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <!-- 规则名称 -->
-          <el-col :span="7">
-            <el-form-item label="规则名称">
-              <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
-            </el-form-item>
-          </el-col>
-          <!-- 创建时间 -->
-          <el-col :span="6">
-            <el-form-item label="创建时间">
-              <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="-"
-                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="form.pickerOptions">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-        </el-row>
+        <!-- 规则类型 -->
+        <el-form-item label="规则类型">
+          <el-select
+            v-model="form.ruleType"
+            placeholder="请选择规则类型"
+            size="medium"
+          >
+            <el-option label="全部规则" value="">全部规则</el-option>
+            <el-option
+              v-for="item in tableConfig.ruleType"
+              :key="item"
+              :label="item"
+              :value="reverseRuleType(item)"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 规则名称 -->
+        <el-form-item label="规则名称">
+          <el-input
+            v-model="form.ruleName"
+            size="medium"
+            placeholder="请输入规则名称"
+          />
+        </el-form-item>
+        <!-- 创建时间 -->
+        <el-form-item label="创建时间">
+          <el-date-picker
+            v-model="form.createdDate"
+            type="daterange"
+            size="medium"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="form.pickerOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
         <!-- 功能按钮组： 查询、重置、新增规则 -->
-        <el-row class="p25">
-          <el-col :span="16" :offset="8">
-            <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
-            <el-button size="mini" type="primary" @click="handleReset">重置筛选</el-button>
-            <el-button size="mini" type="primary" @click="handleAddSplit">新增拆分规则</el-button>
-            <el-button size="mini" type="primary" @click="handleAddPrompt">新增题词规则</el-button>
-          </el-col>
-        </el-row>
       </el-form>
+      <div class="mt30">
+        <el-button size="medium" type="primary" @click="handleQuery"
+          >查询</el-button
+        >
+        <el-button size="medium" @click="handleReset">重置</el-button>
+        <el-button
+          size="medium"
+          icon="el-icon-plus"
+          type="primary"
+          @click="handleAddSplit"
+          >新增拆分规则</el-button
+        >
+        <el-button
+          size="medium"
+          icon="el-icon-plus"
+          type="primary"
+          @click="handleAddPrompt"
+          >新增题词规则</el-button
+        >
+      </div>
     </div>
 
     <!-- 下方规则列表 -->
     <div class="p20">
-      <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
-        @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" :currentPage="tableConfig.currentPage"
-        :pageSize="tableConfig.pageSize" />
+      <r-table
+        :columns="tableConfig.columns"
+        :data="tableData"
+        :deletion="false"
+        :total="tableConfig.total"
+        @currentChange="handleCurrentChange"
+        @sizeChange="handleSizeChange"
+        :currentPage="tableConfig.currentPage"
+        :pageSize="tableConfig.pageSize"
+      />
     </div>
-    </el-card>
-    <edit-prompt-rule ref="editPromptRule" v-if="dialogOptions.currentComponent === 'EditPromptRule'"
-      @getDataList="handleQuery" />
-    <edit-split-rule ref="editSplitRule" v-else-if="dialogOptions.currentComponent === 'EditSplitRule'"
-      @getDataList="handleQuery" />
+    <edit-prompt-rule
+      ref="editPromptRule"
+      v-if="dialogOptions.currentComponent === 'EditPromptRule'"
+      @getDataList="handleQuery"
+    />
+    <edit-split-rule
+      ref="editSplitRule"
+      v-else-if="dialogOptions.currentComponent === 'EditSplitRule'"
+      @getDataList="handleQuery"
+    />
   </div>
 </template>

src/views/track/Index.vue

@@ -198,96 +198,93 @@ export default {
 
 <template>
   <div class="track-container render-container">
-    <!-- 知识库信息 -->
-    <el-form :model="form" label-width="100px" size="small">
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="知识库">
-            <!-- 启用远程加载 -->
-            <el-select
-              filterable
-              v-model="form.datasetId"
-              placeholder="输入搜索知识库"
-            >
-              <!-- 后续需要添加懒加载 -->
-              <el-option
-                v-for="item in datasetList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="8">
-          <el-form-item label="知识文件名称">
-            <el-input
-              @keydown.enter.native="handleSearch"
-              v-model="form.knowledgeName"
-              placeholder="请输入知识文件名称"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="8">
-          <el-form-item label="上传用户">
-            <el-select
-              v-model="form.createdUserLike"
-              placeholder="请选择上传用户"
-            >
-              <el-option label="全部" value=""></el-option>
-              <el-option
-                v-for="item in createdUserOptions"
-                :label="item.label"
-                :value="item.value"
-                :key="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="8">
-          <el-form-item label="上传状态">
-            <el-select
-              v-model="form.documentStatus"
-              placeholder="请选择上传状态"
-            >
-              <el-option label="全部上传状态" value="" />
-              <el-option
-                v-for="item in Object.keys(this.tableConfig.uploadStatusType)"
-                :key="item"
-                :label="tableConfig.uploadStatusType[item]"
-                :value="Number(item)"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="任务时间">
-            <el-date-picker
-              v-model="form.taskTime"
-              type="daterange"
-              unlink-panels
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: 100%"
+    <div class="flex justify-content-b">
+      <el-form
+        :model="form"
+        label-width="100px"
+        size="small"
+        label-position="top"
+        inline
+      >
+        <el-form-item label="知识库">
+          <!-- 启用远程加载 -->
+          <el-select
+            filterable
+            v-model="form.datasetId"
+            placeholder="输入搜索知识库"
+            size="medium"
+          >
+            <!-- 后续需要添加懒加载 -->
+            <el-option
+              v-for="item in datasetList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             />
-          </el-form-item>
-        </el-col>
-        <el-col :span="9" :offset="11" class="mb20">
-          <!-- 搜索按钮 -->
-          <el-button type="primary" size="small" @click="handleSearch"
-            >搜索</el-button
+          </el-select>
+        </el-form-item>
+        <el-form-item label="知识文件名称">
+          <el-input
+            size="medium"
+            @keydown.enter.native="handleSearch"
+            v-model="form.knowledgeName"
+            placeholder="请输入知识文件名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="上传用户">
+          <el-select
+            v-model="form.uploadUser"
+            placeholder="请选择上传用户"
+            size="medium"
           >
-          <!-- 重置按钮 -->
-          <el-button type="primary" size="small" @click="handleReset"
-            >重置筛选</el-button
+            <el-option label="全部上传用户" value="">全部上传用户</el-option>
+            <el-option
+              v-for="item in getUploadUserList"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上传状态">
+          <el-select
+            v-model="form.documentStatus"
+            placeholder="请选择上传状态"
+            size="medium"
           >
-        </el-col>
-      </el-row>
-    </el-form>
+            <el-option label="全部上传状态" value="" />
+            <el-option
+              v-for="item in Object.keys(this.tableConfig.uploadStatusType)"
+              :key="item"
+              :label="tableConfig.uploadStatusType[item]"
+              :value="Number(item)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="任务时间">
+          <el-date-picker
+            v-model="form.taskTime"
+            type="daterange"
+            unlink-panels
+            size="medium"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <!-- 搜索按钮 -->
+      </el-form>
+
+      <div class="mt30 text-right">
+        <el-button type="primary" size="medium" @click="handleSearch"
+          >查询</el-button
+        >
+        <!-- 重置按钮 -->
+        <el-button size="medium" @click="handleReset">重置</el-button>
+      </div>
+    </div>
+    <!-- 知识库信息 -->
 
     <!-- 任务列表 -->
     <div>