fix: 调整视图列表

components.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Table: typeof import('./src/components/common/table.vue')['default']
+    YChart: typeof import('./src/components/common/y-chart.vue')['default']
     YTable: typeof import('./src/components/common/y-table.vue')['default']
   }
 }

package.json

@@ -6,14 +6,16 @@
   "scripts": {
     "dev": "vite --mode staging",
     "build:pre": "vite build --mode staging",
-    "build": "vite build --mode production",
+    "build:pro": "vite build --mode production",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@antv/g2plot": "^2.4.31",
     "@vueuse/core": "^10.11.0",
     "ant-design-vue": "^4.1.2",
     "axios": "^1.6.7",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5"

src/components/common/y-chart.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="chart-show-box">
+    <div class="switch-type">
+      <a-radio-group v-model:value="chartType">
+        <a-radio-button value="line">折线图</a-radio-button>
+        <a-radio-button value="bar">柱状图</a-radio-button>
+      </a-radio-group>
+    </div>
+    <div class="chart-wrap">
+      <Column v-if="chartType === 'bar'" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Line from "@/plugins/antv-g2plot/line.vue";
+import Column from "@/plugins/antv-g2plot/column.vue";
+
+const props = defineProps({
+  chartCfg: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const chartType = ref("line");
+</script>
+
+<style lang="less" scoped>
+.chart-wrap {
+  padding: 20px;
+}
+</style>

src/components/common/y-table.vue

@@ -11,6 +11,7 @@
           v-if="item.type === 'select'"
           class="input-item"
           :options="item.options"
+          allow-clear
           v-model:value="filterData[item.name]"
           @change="toFilt"
         ></a-select>
@@ -18,6 +19,7 @@
           v-if="item.type === 'text'"
           class="input-item"
           placeholder="请输入"
+          allow-clear
           v-model:value="filterData[item.name]"
           @change="toFilt"
         />
@@ -47,6 +49,7 @@
 <script setup>
 import { reactive, ref, watch } from "vue";
 import { useDebounceFn } from "@vueuse/core";
+import _ from "lodash";
 
 const props = defineProps({
   filterConfig: {
@@ -69,9 +72,6 @@ const props = defineProps({
 const emit = defineEmits(["handleFilt"]);
 
 const filterData = ref({});
-// const filterConfig = ref([]);
-// const columnConfig = ref([]);
-// const dataList = ref([]);
 
 const pageState = reactive({
   page: 1,
@@ -86,21 +86,24 @@ watch(
     newVal.forEach((item) => {
       filterData.value[item.name] = undefined;
     });
-
-    for (let i = 0; i < newVal.length; i++) {
-      console.log(
-        "props.filterConfig",
-        newVal[i].label,
-        newVal[i].name,
-        newVal[i].type
-      );
-    }
   }
 );
 
 const getData = () => {
+  const cloneFilter = _.cloneDeep(props.filterConfig);
+  const filter = cloneFilter
+    .filter((item) => {
+      return filterData.value[item.name] !== undefined;
+    })
+    .map((item) => {
+      return {
+        name: item.name,
+        type: item.type,
+        value: filterData.value[item.name],
+      };
+    });
   emit("toFilt", {
-    filter: filterData.value,
+    filter,
     page: pageState.page,
     perPage: pageState.perPage,
   });

src/plugins/antv-g2plot/column.vue

@@ -0,0 +1,26 @@
+<template>
+  <div :class="className" :style="style" ref="container"></div>
+</template>
+
+<script setup>
+import { Column } from "@antv/g2plot";
+// hooks
+import useChart from "./useChart";
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { container } = useChart(Column, props.config);
+</script>

src/plugins/antv-g2plot/line.vue

@@ -0,0 +1,26 @@
+<template>
+  <div :class="className" :style="style" ref="container"></div>
+</template>
+
+<script setup>
+import { Line } from "@antv/g2plot";
+// hooks
+import useChart from "./useChart";
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { container } = useChart(Line, props.config);
+</script>

src/plugins/antv-g2plot/pie.vue

@@ -0,0 +1,26 @@
+<template>
+  <div :class="className" :style="style" ref="container"></div>
+</template>
+
+<script setup>
+import { Pie } from "@antv/g2plot";
+// hooks
+import useChart from "./useChart";
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { container } = useChart(Pie, props.config);
+</script>

src/plugins/antv-g2plot/useChart.js

@@ -0,0 +1,91 @@
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import _ from "lodash";
+
+export default function useChart(ChartClass, config) {
+  const chart = ref(null); // 表格实例
+  const chartOptions = ref(null); // 图表配置
+  const container = ref(null); // 渲染图表元素
+  const { onReady, onEvent } = config;
+
+  // 全局事件侦听器
+  let handler;
+
+  onMounted(() => {
+    chartOptions.value = _.cloneDeep(config);
+
+    // 实例化图表
+    const chartInstance = new ChartClass(container.value, { ...config });
+    chartInstance.toDataURL = (type, encoderOptions) => {
+      return toDataURL(type, encoderOptions);
+    };
+    chartInstance.downloadImage = (name, type, encoderOptions) => {
+      return downloadImage(name, type, encoderOptions);
+    };
+    chartInstance.render(); // 渲染图表
+
+    chart.value = chartInstance;
+
+    // 图表渲染完成回调
+    if (onReady) {
+      onReady(chartInstance);
+    }
+    // 侦听全局事件
+    handler = (event) => {
+      if (onEvent) {
+        onEvent(chartInstance, event);
+      }
+    };
+    chartInstance.on("*", handler);
+  });
+
+  onBeforeUnmount(() => {
+    chart.value.destroy();
+    chart.value.off("*", handler);
+    chart.value = undefined;
+  });
+
+  // 配置更改时更新图表
+  watch(
+    () => config,
+    (config) => {
+      const newConfig = _.cloneDeep(config);
+      chartOptions.value = newConfig;
+      chart.value.update(newConfig);
+    },
+    {
+      deep: true,
+    }
+  );
+
+  const toDataURL = (type = "image/png", encoderOptions) => {
+    return chart.value?.chart.canvas.cfg.el.toDataURL(type, encoderOptions);
+  };
+
+  const downloadImage = (
+    name = "download",
+    type = "image/png",
+    encoderOptions
+  ) => {
+    let imageName = name;
+    if (name.indexOf(".") === -1) {
+      imageName = `${name}.${type.split("/")[1]}`;
+    }
+    const base64 = chart.value?.chart.canvas.cfg.el.toDataURL(
+      type,
+      encoderOptions
+    );
+    let a = document.createElement("a");
+    a.href = base64;
+    a.download = imageName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    a = null;
+    return imageName;
+  };
+
+  return {
+    chart,
+    container,
+  };
+}

src/router/routes.ts

@@ -74,7 +74,7 @@ const routeList: RouteType[] = [
             path: 'create-view',
             name: 'create-view',
             component: () => import('@/views/view-all-manage/create-view/index.vue'),
-            meta: { title: '创建' },
+            meta: { title: '创建视图' },
             isMenu: true,
             children: [],
           },

src/views/config-manage/module-cfg/components/field-modal.vue

@@ -200,6 +200,7 @@ const handleCancel = (record) => {
 
 const handleSave = (record) => {
   const params = {
+    field_id: record.field_id,
     field_title: record.field_title,
     field_name: record.field_name,
     is_search: record.is_search,

src/views/config-manage/project-cfg/components/create-modal.vue

@@ -13,6 +13,9 @@
           v-model:value="formData.project_name"
         />
       </a-form-item>
+      <a-form-item label="项目标识" name="mark">
+        <a-input placeholder="请输入项目标识，例如：oa" />
+      </a-form-item>
       <a-form-item label="展示状态" name="is_show">
         <a-switch
           v-model:checked="formData.is_show"
@@ -85,6 +88,7 @@ const formRules = {
   project_name: [
     { required: true, message: "请输入项目名称", trigger: "submit" },
   ],
+  mark: [{ required: true, message: "请输入项目标识", trigger: "submit" }],
   database_address: [
     { required: true, message: "请输入数据库地址", trigger: "submit" },
   ],
@@ -105,6 +109,7 @@ const formRules = {
 const formRef = ref();
 const formData = ref({
   project_name: undefined,
+  mark: undefined,
   is_show: 0,
   database_address: undefined,
   database_port: undefined,
@@ -159,6 +164,7 @@ const validateConnect = () => {
 const resetFormData = () => {
   formData.value = {
     project_name: undefined,
+    mark: undefined,
     is_show: 0,
     database_address: undefined,
     database_port: undefined,

src/views/config-manage/project-cfg/config.ts

@@ -1,6 +1,7 @@
 export const projectCfgCols = [
   { dataIndex: 'project_id', title: '编号', align: 'center'},
   { dataIndex: 'project_name', title: '项目名称', align: 'center'},
+  { dataIndex: 'mark', title: '项目标识', align: 'center'},
   { dataIndex: 'database_name', title: '数据库名', align: 'center'},
   { dataIndex: 'is_show', title: '展示状态', align: 'center'},
   // { dataIndex: 'sort', title: '排序', align: 'center'},

src/views/view-all-manage/create-view/index.vue

@@ -56,18 +56,16 @@
                 :options="item.options"
                 v-model:value="previewData.filterData[item.name]"
                 placeholder="请选择"
+                allow-clear
                 @change="toFilt"
               ></a-select>
               <a-input
-                v-else
+                v-if="item.type === 'text'"
                 class="input-item"
                 placeholder="请输入"
+                allow-clear
                 v-model:value="previewData.filterData[item.name]"
-                @change="
-                  (e) => {
-                    toFilt(item.name, e.target.value);
-                  }
-                "
+                @change="toFilt"
               />
             </div>
           </div>
@@ -76,6 +74,7 @@
               :columns="previewData.columnConfig"
               :data-source="previewData.dataList"
               :pagination="false"
+              :scroll="{ x: 1200 }"
               size="small"
               bordered
             ></a-table>
@@ -90,6 +89,10 @@
             />
           </div>
         </div>
+        <div class="preview-area" v-else>
+          <div><BarChartOutlined /></div>
+          <div>预览区</div>
+        </div>
       </div>
       <a-modal
         :open="nameVisible"
@@ -112,6 +115,7 @@
 import { onMounted, reactive, ref } from "vue";
 import { getProModularField, preview, saveView } from "./service";
 import { message } from "ant-design-vue";
+import { BarChartOutlined } from "@ant-design/icons-vue";
 
 const projectSel = ref([]);
 const modularSel = ref([]);
@@ -151,22 +155,39 @@ const onProjectChange = (val) => {
   modularId.value = undefined;
   fieldList.value = [];
   fieldIds.value = [];
+  resetPreviewData();
 };
 
 const onModularChange = (val) => {
   const target = modularSel.value.find((item) => item.value === val);
   fieldList.value = target.child;
+  resetPreviewData();
+};
+
+const resetPreviewData = () => {
+  previewData.type = "";
+  previewData.filterConfig = [];
+  previewData.columnConfig = [];
+  previewData.dataList = [];
+  previewData.filterData = {};
+  previewData.page = 1;
+  previewData.perPage = 20;
+  previewData.total = 0;
 };
 
 const toPreview = () => {
   previewLoading.value = true;
-  const filter = previewData.filterConfig.map((item) => {
-    return {
-      name: item.name,
-      type: item.type,
-      value: previewData.filterData[item.name],
-    };
-  });
+  const filter = previewData.filterConfig
+    .filter((item) => {
+      return previewData.filterData[item.name] !== undefined;
+    })
+    .map((item) => {
+      return {
+        name: item.name,
+        type: item.type,
+        value: previewData.filterData[item.name],
+      };
+    });
   preview({
     modularId: modularId.value,
     fieldIds: fieldIds.value.toString(),
@@ -183,7 +204,6 @@ const toPreview = () => {
             ? previewData.filterData[item.name]
             : undefined;
         });
-        console.log("filterData", previewData.filterData);
         previewData.columnConfig = res.data.header;
         previewData.dataList = res.data.data;
         previewData.total = res.data.count;
@@ -214,8 +234,7 @@ const toSaveView = () => {
   });
 };
 
-const toFilt = (key, value) => {
-  previewData.filterData[key] = value;
+const toFilt = () => {
   previewData.page = 1;
   toPreview();
 };
@@ -224,13 +243,15 @@ const toFilt = (key, value) => {
 <style lang="less" scoped>
 .normal-container {
   height: calc(100vh - 120px);
+  padding: 16px;
 }
 .view-create-box {
   display: flex;
   height: 100%;
 }
 .left-box {
-  width: 400px;
+  width: 320px;
+  flex-shrink: 0;
   height: calc(100% - 20px);
   padding: 10px;
   border-right: 1px solid #ddd;
@@ -243,10 +264,24 @@ const toFilt = (key, value) => {
   }
 }
 .right-box {
-  padding: 10px;
+  padding: 0 0 0 10px;
   flex-grow: 1;
   overflow: auto;
 }
+.preview-area {
+  background-color: #f6f6f6;
+  height: 100%;
+  width: 100%;
+  font-size: 20px;
+  color: #999;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .anticon-bar-chart {
+    font-size: 100px;
+  }
+}
 
 .y-table-filter {
   display: flex;
@@ -264,5 +299,6 @@ const toFilt = (key, value) => {
 }
 .pagination-box {
   text-align: center;
+  margin-top: 10px;
 }
 </style>

src/views/view-all-manage/view-list/index.vue

@@ -40,7 +40,26 @@
           "
           size="small"
           bordered
-        ></a-table>
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'action'">
+              <a-popconfirm
+                title="确定删除？"
+                @confirm="toDelete(record.preview_id)"
+              >
+                <a-button
+                  type="link"
+                  @click="
+                    (e) => {
+                      e.stopPropagation();
+                    }
+                  "
+                  >删除</a-button
+                >
+              </a-popconfirm>
+            </template>
+          </template>
+        </a-table>
         <a-pagination
           v-model:current="pageState.page"
           :total="pageState.total"
@@ -64,6 +83,10 @@
             }
           "
         />
+        <div class="preview-area" v-else>
+          <div><BarChartOutlined /></div>
+          <div>展示区</div>
+        </div>
       </div>
     </div>
   </div>
@@ -71,9 +94,11 @@
 
 <script setup>
 import { onMounted, ref, reactive } from "vue";
-import { getProModular, getViewList, getViewInfo } from "./service";
+import { getProModular, getViewList, getViewInfo, deleteView } from "./service";
 import { viewListCols } from "./config";
 import yTable from "@/components/common/y-table.vue";
+import { message } from "ant-design-vue";
+import { BarChartOutlined } from "@ant-design/icons-vue";
 
 const projectSel = ref([]);
 const modularSel = ref([]);
@@ -83,6 +108,7 @@ const dataList = ref([]);
 const selectedRowId = ref();
 const selectViewInfo = ref({
   type: "",
+  filter: [],
 });
 
 const pageState = reactive({
@@ -130,11 +156,19 @@ const onModularChange = () => {
   pageState.page = 1;
   toGetList();
 };
+
+const toDelete = (previewId) => {
+  deleteView({ previewId }).then(() => {
+    message.success("删除成功");
+    toGetList();
+  });
+};
 </script>
 
 <style lang="less" scoped>
 .normal-container {
   height: calc(100vh - 120px);
+  padding: 16px;
 }
 
 .view-list-box {
@@ -143,14 +177,20 @@ const onModularChange = () => {
 }
 
 .left-box {
-  width: 400px;
+  width: 320px;
   height: calc(100% - 20px);
   padding: 10px;
+  flex-shrink: 0;
   border-right: 1px solid #ddd;
 }
 
-.selected-row {
-  background-color: beige;
+:deep(.ant-table-row:hover) {
+  cursor: pointer;
+  background-color: #e6f4ff;
+}
+
+:deep(.selected-row) {
+  background-color: #e6f4ff;
 }
 
 .pagination-box {
@@ -158,8 +198,23 @@ const onModularChange = () => {
   margin-top: 10px;
 }
 .right-box {
-  padding: 10px;
+  padding: 0 0 0 10px;
   flex-grow: 1;
   overflow: auto;
 }
+
+.preview-area {
+  background-color: #f6f6f6;
+  height: 100%;
+  width: 100%;
+  font-size: 20px;
+  color: #999;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .anticon-bar-chart {
+    font-size: 100px;
+  }
+}
 </style>

src/views/view-all-manage/view-list/service.js

@@ -1,4 +1,4 @@
-import { get } from "@/utils/request";
+import { get, post } from "@/utils/request";
 
 // 联动下拉
 export function getProModular() {
@@ -24,15 +24,25 @@ export function getViewInfo({
   previewId,
   page = 1,
   perPage = 20,
-  filter = {},
+  filter = [],
 }) {
-  return get({
+  return post({
     url: "/api/v1/preview/info",
-    params: {
+    data: {
       preview_id: previewId,
       page,
-      perPage: perPage,
+      per_page: perPage,
       filter,
     },
   });
 }
+
+// 删除视图
+export function deleteView({ previewId }) {
+  return post({
+    url: "/api/v1/preview/del",
+    data: {
+      preview_id: previewId,
+    },
+  });
+}