表格列表样式统计功能基础搭建

ruoyi-ui/src/views/tableMange/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-row :gutter="20">
-      <el-col :span="18">
+      <el-col :span="18" :class="{edit: menudata}">
         <el-card shadow="always" :body-style="{ padding: '20px' }">
           <template #header>
             <div>
@@ -194,93 +194,149 @@
           <!-- </el-form> -->
         </el-card>
       </el-col>
-      <el-col :span="6">
-        <el-card shadow="always" :body-style="{ padding: '5px' }">
-          <template #header>
-            <div>
-              <span>菜单编辑</span>
-            </div>
-          </template>
-          <el-form
-            ref="formData"
-            :model="formData"
-            label-width="100px"
-            :rules="rules"
-          >
-            <el-form-item label="菜单名称" prop="menuName">
-              <el-input v-model="formData.menuName"></el-input>
-            </el-form-item>
-            <el-form-item label="菜单路由" prop="routePath">
-              <!-- <el-select v-model="formData.routePath" placeholder="请选择路由">
-                <el-option label="区域一" value="shanghai"></el-option>
-                <el-option label="区域二" value="beijing"></el-option>
-              </el-select> -->
-              <treeselect
-                :append-to-body="true"
-                v-model="formData.routePath"
-                :options="menus"
-                :normalizer="normalizer"
-                @change="treeSelectChange"
-                :show-count="true"
-                placeholder="请选择父级路由"
-              />
-            </el-form-item>
-            <el-form-item label="是否显示列表" v-if="false">
-              <el-switch v-model="formData.isShowList"></el-switch>
-            </el-form-item>
-            <el-form-item label="时间格式" prop="timeFormate">
-              <el-select
-                v-model="formData.timeFormate"
-                placeholder="请选择时间格式"
-              >
-                <el-option
-                  v-for="val in dict.type.sys_time_format"
-                  :key="val.value"
-                  :label="val.label"
-                  :value="val.value"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="表格主键" prop="primaryKey">
-              <el-select
-                v-model="formData.primaryKey"
-                placeholder="请选择表格主键"
-              >
-                <el-option
-                  v-for="val in primaryKeyList"
-                  :key="val.fieldName"
-                  :label="val.fieldDescription"
-                  :value="val.fieldName"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="排序依赖字段">
-              <el-select
-                v-model="formData.orderByColumn"
-                placeholder="请选择排序依赖"
+      <el-col :span="6" :class="{menudata: menudata}">
+        <el-tabs v-model="activeName" @tab-click="tabhandleClick">
+          <el-tab-pane label="菜单编辑" name="menuedit">
+            <el-card shadow="always" :body-style="{ padding: '10px' }">
+              <!-- <template #header>
+                <div>
+                  <span>菜单编辑</span>
+                </div>
+              </template> -->
+              <el-form
+                ref="formData"
+                :model="formData"
+                label-width="100px"
+                :rules="rules"
               >
-                <el-option
-                  v-for="val in orderByFieldList"
-                  :key="val.fieldName"
-                  :label="val.fieldDescription"
-                  :value="val.tableName + '.' + val.fieldName"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="排序方式" v-show="formData.orderByColumn">
-              <el-radio v-model="formData.isAsc" label="ASC">升序</el-radio>
-              <el-radio v-model="formData.isAsc" label="DESC">降序</el-radio>
-            </el-form-item>
-            <el-form-item>
-              <el-button size="mini" @click="previewHandle">预览</el-button>
-              <el-button size="mini" type="primary" @click="createHandle">{{
-                tId ? "确认修改" : "确认创建"
-              }}</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
+                <el-form-item label="菜单名称" prop="menuName">
+                  <el-input v-model="formData.menuName"></el-input>
+                </el-form-item>
+                <el-form-item label="菜单路由" prop="routePath">
+                  <!-- <el-select v-model="formData.routePath" placeholder="请选择路由">
+                    <el-option label="区域一" value="shanghai"></el-option>
+                    <el-option label="区域二" value="beijing"></el-option>
+                  </el-select> -->
+                  <treeselect
+                    :append-to-body="true"
+                    v-model="formData.routePath"
+                    :options="menus"
+                    :normalizer="normalizer"
+                    @change="treeSelectChange"
+                    :show-count="true"
+                    placeholder="请选择父级路由"
+                  />
+                </el-form-item>
+                <el-form-item label="是否显示列表" v-if="false">
+                  <el-switch v-model="formData.isShowList"></el-switch>
+                </el-form-item>
+                <el-form-item label="时间格式" prop="timeFormate">
+                  <el-select
+                    v-model="formData.timeFormate"
+                    placeholder="请选择时间格式"
+                  >
+                    <el-option
+                      v-for="val in dict.type.sys_time_format"
+                      :key="val.value"
+                      :label="val.label"
+                      :value="val.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="表格主键" prop="primaryKey">
+                  <el-select
+                    v-model="formData.primaryKey"
+                    placeholder="请选择表格主键"
+                  >
+                    <el-option
+                      v-for="val in primaryKeyList"
+                      :key="val.fieldName"
+                      :label="val.fieldDescription"
+                      :value="val.fieldName"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="排序依赖字段">
+                  <el-select
+                    v-model="formData.orderByColumn"
+                    placeholder="请选择排序依赖"
+                  >
+                    <el-option
+                      v-for="val in orderByFieldList"
+                      :key="val.fieldName"
+                      :label="val.fieldDescription"
+                      :value="val.tableName + '.' + val.fieldName"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="排序方式" v-show="formData.orderByColumn">
+                  <el-radio v-model="formData.isAsc" label="ASC">升序</el-radio>
+                  <el-radio v-model="formData.isAsc" label="DESC">降序</el-radio>
+                </el-form-item>
+                <el-form-item>
+                  <el-button size="mini" @click="previewHandle">预览</el-button>
+                  <el-button size="mini" type="primary" @click="createHandle">{{
+                    tId ? "确认修改" : "确认创建"
+                  }}</el-button>
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </el-tab-pane>
+          <el-tab-pane label="数据统计" name="datacount">
+            <el-button
+              type="primary"
+              class="inline-large-button"
+              icon="el-icon-plus"
+              size="mini"
+              @click="isShowAddData = true"
+            >
+              添加数据字段
+            </el-button>
+            
+            <el-button size="mini" type="primary" @click=countHandle>确定统计</el-button>
+         
+            <el-table
+              :data="datacountTable"
+              border
+              class="mb10"
+              style="width: 100%">
+              <el-table-column
+                prop="number"
+                label="序号"
+                width="50">
+              </el-table-column>
+              <el-table-column
+                prop="datafield"
+                label="数据字段"
+                width="80">
+              </el-table-column>
+              <el-table-column
+                prop="type"
+                label="类型"
+                width="50">
+              </el-table-column>
+              <el-table-column
+                prop="statuscode"
+                label="状态码"
+                width="70">
+              </el-table-column>
+              <el-table-column
+                prop="title"
+                label="标题"
+                width="83">
+              </el-table-column>
+              <el-table-column
+                prop="description"
+                label="描述"
+                width="150">
+              </el-table-column>
+            </el-table>
+
+          </el-tab-pane>
+        </el-tabs>
       </el-col>
     </el-row>
+
     <el-dialog title="效果预览" :visible.sync="isShowPreview" width="50%">
       <el-row :gutter="10" class="mb8">
         <el-col :span="18">
@@ -435,6 +491,59 @@
         </span>
       </template>
     </el-dialog>
+
+    <!-- 添加数据统计对话框 -->
+    <el-dialog
+      title="添加统计数据字段"
+      :visible.sync="isShowAddData"
+      width="30%">
+
+      <el-form 
+      label-width="100px" 
+      :model="dataCountFormData">
+        <el-form-item label="数据字段">
+          <el-select 
+          v-model="dataCountFormData.datafield" 
+          placeholder="请选择数据字段">
+            <el-option 
+            v-for="item in dataArr"
+            :key="item.id"
+            :label="item.fieldName" 
+            :value="item.fieldName">
+          </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select 
+          v-model="dataCountFormData.type" 
+          placeholder="请选择类型">
+            <el-option label="数量" value="num"></el-option>
+            <el-option label="状态" value="status"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="状态码" v-show="dataCountFormData.type === 'status' ">
+          <el-select 
+          v-model="dataCountFormData.statuscode" 
+          placeholder="请选择状态码">
+            <el-option label="已完成" value="1"></el-option>
+            <el-option label="未完成" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="dataCountFormData.title"></el-input>
+        </el-form-item>
+
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="dataCountFormData.description"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeAddDialog">取 消</el-button>
+        <el-button type="primary" @click="addData">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -591,9 +700,23 @@ export default {
       tableDataList: [], //数据
       editData: {},
       menuOrderNum: 0,
+      // tab动态切换
+      activeName: 'menuedit', 
+      // 数据统计对象
+      dataCountFormData: {},
+      // 数据统计表格
+      datacountTable: [],
+      // 是否切换到数据统计
+      menudata: false,
+      // 显示添加字段对话框
+      isShowAddData: false
     };
   },
   computed: {
+    // 数据字段
+    dataArr(){
+      return this.tableFieldList.filter(item => item.isShow)
+    },
     ...mapState({
       databaseName: (state) => state.user.dataSource.databaseName,
       databaseType: (state) => state.user.dataSource.databaseType,
@@ -1383,6 +1506,36 @@ export default {
       }
       return res;
     },
+    // tab切换
+    tabhandleClick() {
+      this.menudata = this.activeName === 'datacount' ? true : false;
+    },
+    // 添加数据字段
+    addData(){
+      this.dataCountFormData.number =  this.datacountTable.length + 1
+      console.log(this.dataCountFormData)
+      this.dataCountFormData.type = this.dataCountFormData.type == 'num' ? '数量' : '状态'
+      if(this.dataCountFormData.type == 'status'){
+        this.dataCountFormData.statuscode = this.dataCountFormData.type == '1' ? '已完成' : '未完成'
+      }
+      
+      this.datacountTable.push(this.dataCountFormData)
+      this.isShowAddData = false
+      this.dataCountFormData = {}
+    },
+    // 关闭添加数据字段
+    closeAddDialog(){
+      this.isShowAddData = false
+      this.dataCountFormData = {}
+    },
+    // 确定统计
+    countHandle(){
+      if(this.datacountTable.length == 0){
+        this.$message.warning("请确定统计数据字段");
+        return
+      }
+      console.log('确定统计');
+    }
   },
   created() {},
   async mounted() {
@@ -1404,4 +1557,14 @@ export default {
 ::v-deep .vue-treeselect--has-value .vue-treeselect__input {
   vertical-align: middle !important;
 }
+.menudata{
+  width: 30% !important;
+}
+.edit{
+  width: 70% !important;
+}
+.mb10{
+  margin-top: 10px;
+}
+
 </style>

ruoyi-ui/src/views/tablelist/commonTable/queryfrom.vue

@@ -1,5 +1,27 @@
 <template>
   <div>
+    <div class="cardBox">
+      <el-card 
+        shadow="hover" 
+        :body-style="{ padding: '20px'}" 
+        class="card"
+        v-for="item in cardcountArr"
+        >
+        <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
+          <div class="title">{{ item.title }}</div>
+        </el-tooltip>
+          
+        <el-tooltip class="item" effect="dark" :content="item.description" placement="top-start">
+          <div class="description">{{ item.description}}</div>
+        </el-tooltip>
+
+        <div class="type">
+          <div>{{ item.type }}</div>
+          <div class="count">{{ item.count }}</div>
+        </div>
+      </el-card>
+    </div>
+    
     <el-form
       :model="queryParams.queryMap"
       ref="queryForm"
@@ -172,6 +194,63 @@ export default {
       selects: [],
       // 单选/按钮
       radios: [],
+      // card
+      cardcountArr: [
+        {
+          title: '标题1454654564548978784654456454545456489748787',
+          description: '描述11111154544564456486474787475465454564545454545454545',
+          type: '数量1',
+          count: 10
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        },
+        {
+          title: '标题2',
+          description: '描述256+56++46545646',
+          type: '已完成',
+          count: 20
+        }
+      ]
     };
   },
   watch: {
@@ -238,4 +317,44 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.cardBox{
+  display: flex;
+  align-content: space-between;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+.card{
+  /* width:15%; */
+  flex-basis: 15%;
+  margin-bottom: 10px;
+  margin-right: 15px;
+  .title{
+    /* width:20%; */
+    font-size: 18px;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden; 
+    text-overflow: ellipsis;
+  }
+  .description{
+    width: 70%;
+    font-size: 13px;
+    color: #9699a2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    word-break: break-all;
+    float: left;
+  }
+  .type{
+    float: right;
+    margin-top: 10px;
+  }
+  .count{
+    font-size: 30px;
+  }
+}
+</style>