feat: 新增配置管理和视图管理

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

@@ -0,0 +1,233 @@
+<template>
+  <a-modal :open="open" title="字段管理" style="top: 30px" :footer="null">
+    <div class="field-manager">
+      <div class="header-box">
+        <a-space>
+          <a-input
+            v-model:value="fieldName"
+            placeholder="请输入字段名称"
+            allow-clear
+            style="width: 200px"
+            @change="search"
+          />
+          <a-button type="primary" @click="addField">新建</a-button>
+        </a-space>
+      </div>
+      <a-table
+        :columns="viewCfgCols"
+        :data-source="dataList"
+        :pagination="false"
+        size="small"
+        bordered
+      >
+        <template #bodyCell="{ column, record }">
+          <template
+            v-if="
+              [
+                'field_name',
+                'field_title',
+                'belong_to_table',
+                'original_sql',
+              ].includes(column.dataIndex)
+            "
+          >
+            <a-input
+              v-if="editableData[record.field_id]"
+              v-model:value="record[column.dataIndex]"
+              placeholder="请输入"
+            />
+            <template v-else>
+              {{ record[column.dataIndex] }}
+            </template>
+          </template>
+          <template v-if="column.dataIndex === 'field_type_name'">
+            <a-select
+              v-if="editableData[record.field_id]"
+              v-model:value="record.field_type_id"
+              :options="fieldTypeSel"
+              placeholder="请选择"
+              style="width: 160px"
+            >
+            </a-select>
+            <template v-else>
+              {{ record.field_type_name }}
+            </template>
+          </template>
+          <template v-if="column.dataIndex === 'is_search'">
+            <a-switch
+              v-if="editableData[record.field_id]"
+              v-model:checked="record.is_search"
+              :checkedValue="1"
+              :unCheckedValue="0"
+            />
+            <template v-else>
+              {{ record.is_search ? "是" : "否" }}
+            </template>
+          </template>
+          <template v-if="column.dataIndex === 'action'">
+            <a-space v-if="editableData[record.field_id]">
+              <a-button type="primary" size="small" @click="handleSave(record)"
+                >保存</a-button
+              >
+              <a-button size="small" @click="handleCancel(record)"
+                >取消</a-button
+              >
+            </a-space>
+            <a-button v-else type="link" @click="handleEdit(record)"
+              >修改</a-button
+            >
+          </template>
+        </template>
+      </a-table>
+      <a-pagination
+        :current="pageState.page"
+        :page-size="pageState.perPage"
+        :total="pageState.total"
+        class="pagination-box"
+        size="small"
+        @change="pageChange"
+      />
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { viewCfgCols } from "@/views/config-manage/module-cfg/config";
+import {
+  getFieldTypeSelect,
+  getFieldList,
+  // deleteField,
+  saveField,
+  // getFieldDetail,
+} from "@/views/config-manage/module-cfg/service";
+import { message } from "ant-design-vue";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  modularId: {
+    type: Number,
+    default: 0,
+  },
+});
+const listLoading = ref(false);
+const fieldName = ref("");
+const dataList = ref([]);
+const fieldTypeSel = ref([]);
+const pageState = reactive({
+  page: 1,
+  perPage: 20,
+  total: 0,
+});
+const editableData = reactive({});
+
+watch(
+  () => props.open,
+  (newVal) => {
+    if (newVal) {
+      toGetList();
+    }
+  }
+);
+
+onMounted(() => {
+  toGetFieldTypes();
+});
+
+// 字段类型下拉
+const toGetFieldTypes = () => {
+  getFieldTypeSelect().then((res) => {
+    fieldTypeSel.value = res.data;
+  });
+};
+
+// 字段列表
+const toGetList = () => {
+  listLoading.value = true;
+  getFieldList({
+    fieldName: fieldName.value,
+    modularId: props.modularId,
+    page: pageState.page,
+    perPage: pageState.perPage,
+  }).then((res) => {
+    dataList.value = res.data.list;
+    pageState.total = res.data.total;
+  });
+};
+
+const pageChange = () => {
+  toGetList();
+};
+
+const search = () => {
+  pageState.page = 1;
+  toGetList();
+};
+
+const addField = () => {
+  const item = {
+    field_id: new Date().getTime() + "",
+    field_title: undefined,
+    field_name: undefined,
+    is_search: 0,
+    field_type_id: undefined,
+    belong_to_table: undefined,
+    original_sql: undefined,
+    sort: 0,
+  };
+  dataList.value.unshift(item);
+  editableData[item.field_id] = {
+    ...item,
+  };
+};
+
+const handleEdit = (record) => {
+  editableData[record.field_id] = {
+    ...record,
+  };
+};
+
+const handleCancel = (record) => {
+  if (typeof record.field_id === "string") {
+    dataList.value.shift();
+  } else {
+    delete editableData[record.field_id];
+  }
+};
+
+const handleSave = (record) => {
+  const params = {
+    field_title: record.field_title,
+    field_name: record.field_name,
+    is_search: record.is_search,
+    field_type_id: record.field_type_id,
+    belong_to_table: record.belong_to_table,
+    original_sql: record.original_sql,
+    modular_id: props.modularId,
+  };
+  if (typeof params.field_id === "string") {
+    // 新建
+    delete params.field_id;
+  } else {
+    params.field_id = record.field_id;
+  }
+  saveField(params).then(() => {
+    delete editableData[record.field_id];
+    message.success("保存成功");
+    toGetList();
+  });
+};
+</script>
+
+<style lang="less" scoped>
+.header-box {
+  margin-bottom: 10px;
+}
+
+.pagination-box {
+  text-align: center;
+}
+</style>