refactor: 悦码项目重构

apps/y-code-v1/src/views/view-all-manage/view-list/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="normal-container">
+    <div class="view-list-box">
+      <div class="left-box">
+        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+          <a-form-item label="项目">
+            <a-select
+              :options="projectSel"
+              v-model:value="projectId"
+              placeholder="请选择项目"
+              @change="onProjectChange"
+            ></a-select>
+          </a-form-item>
+          <a-form-item label="数据来源">
+            <a-select
+              :options="modularSel"
+              v-model:value="modularId"
+              placeholder="请先选好项目再选择"
+              @change="onModularChange"
+            ></a-select>
+          </a-form-item>
+        </a-form>
+        <a-table
+          :data-source="dataList"
+          :columns="viewListCols"
+          :pagination="false"
+          :row-class-name="
+            (record) =>
+              record.preview_id === selectedRowId ? 'selected-row' : ''
+          "
+          :custom-row="
+            (record, index) => {
+              return {
+                onClick: () => {
+                  selectedRowId = record.preview_id;
+                  toGetViewInfo();
+                },
+              };
+            }
+          "
+          size="small"
+          bordered
+        >
+          <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"
+          :page-size="pageState.perPage"
+          :hide-on-single-page="false"
+          size="small"
+          class="pagination-box"
+          @change="toGetList"
+        />
+      </div>
+      <div class="right-box">
+        <y-table
+          v-if="selectViewInfo.type === 'table'"
+          :previewId="selectedRowId"
+          :filter-config="selectViewInfo.filter"
+          :data-list="selectViewInfo.data"
+          :column-config="selectViewInfo.header"
+          :total="selectViewInfo.count"
+          :title="selectViewInfo.preview_name"
+          :is-export="selectViewInfo.is_export"
+          @toFilt="
+            (params) => {
+              toGetViewInfo(params);
+            }"
+        />
+        <y-chart
+          v-else-if="selectViewInfo.type === 'chart'"
+          :chartCfg="selectViewInfo.config"
+          :title="selectViewInfo.preview_name"
+          :filter-config="selectViewInfo.filter"
+          @toFilt="toGetViewInfo"
+        />
+        <div class="preview-area" v-else>
+          <div><BarChartOutlined /></div>
+          <div>展示区</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive } from "vue";
+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([]);
+const projectId = ref();
+const modularId = ref();
+const dataList = ref([]);
+const selectedRowId = ref();
+const selectViewInfo = ref({
+  type: "",
+  filter: [],
+  config: {
+    line: {
+      data: []
+    }
+  }
+});
+
+const pageState = reactive({
+  page: 1,
+  perPage: 20,
+  total: 0,
+});
+
+onMounted(() => {
+  toGetProModular();
+});
+
+const toGetProModular = () => {
+  getProModular().then((res) => {
+    projectSel.value = res.data;
+    if (res.data.length) {
+      projectId.value = res.data[0].value;
+      onProjectChange(projectId.value)
+    }
+  });
+};
+
+const toGetList = () => {
+  getViewList({
+    modularId: modularId.value,
+    page: pageState.page,
+    perPage: pageState.perPage,
+  }).then((res) => {
+    dataList.value = res.data.list;
+    pageState.total = res.data.total;
+  });
+};
+
+const toGetViewInfo = (params = {}) => {
+  getViewInfo({
+    previewId: selectedRowId.value,
+    ...params,
+  }).then((res) => {
+    selectViewInfo.value = res.data;
+  });
+};
+
+const onProjectChange = (val) => {
+  modularSel.value = projectSel.value.find((item) => item.value === val).child;
+  modularId.value = null;
+};
+
+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 {
+  display: flex;
+  height: 100%;
+}
+
+.left-box {
+  width: 320px;
+  height: calc(100% - 20px);
+  padding: 10px;
+  flex-shrink: 0;
+  border-right: 1px solid #ddd;
+  overflow: auto;
+}
+
+:deep(.ycode-ant-table-row:hover) {
+  cursor: pointer;
+  background-color: #e6f4ff;
+}
+
+:deep(.selected-row) {
+  background-color: #e6f4ff;
+}
+
+.pagination-box {
+  text-align: center;
+  margin-top: 10px;
+}
+.right-box {
+  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>