fix: 调整视图列表

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,
+    },
+  });
+}