fix: 报表新增导出+样式隔离

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

@@ -48,7 +48,7 @@
               :options="fieldNumTypeSel" 
               placeholder="请选择"
               allow-clear
-              style="width: 160px">
+              style="width: 120px">
             </a-select>
             <template v-else>
               {{ record.field_numerical_name }}
@@ -61,7 +61,7 @@
               :options="fieldTypeSel"
               placeholder="请选择"
               allow-clear
-              style="width: 160px"
+              style="width: 120px"
             >
             </a-select>
             <template v-else>
@@ -79,6 +79,19 @@
               {{ record.is_search ? "是" : "否" }}
             </template>
           </template>
+          <template v-if="column.dataIndex === 'is_other_database'">
+            <template v-if="editableData[record.field_id]">
+              <a-switch
+                v-model:checked="record.is_other_database"
+                :checkedValue="1"
+                :unCheckedValue="0" 
+              />
+              <a-button v-if="record.is_other_database" type="link" @click="openSpecialModal(record)">请填写</a-button>
+            </template>
+            <template v-else>
+              {{ record.is_other_database ? "是" : "否" }}
+            </template>
+          </template>
           <template v-if="column.dataIndex === 'original_type'">
             <a-select 
               v-if="editableData[record.field_id]"
@@ -116,6 +129,31 @@
         @change="pageChange"
       />
     </div>
+    <a-modal :open="specialVisible" :width="640" title="数据库特配" :bodyStyle="{ marginTop: '30px' }" @ok="specialVisible = false" @cancel="specialVisible = false">
+      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+        <a-form-item label="数据库驱动">
+          <a-radio-group v-model:value="specialModalData[specialModalId].drive_type">
+            <a-radio :value="1">MySQL</a-radio>
+            <a-radio :value="2">Click House</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="数据库地址">
+          <a-input placeholder="请输入数据库地址" v-model:value="specialModalData[specialModalId].database_address" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库端口">
+          <a-input-number placeholder="请输入数据库端口" style="width: 200px" v-model:value="specialModalData[specialModalId].database_port" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库名称">
+          <a-input placeholder="请输入数据库名称" v-model:value="specialModalData[specialModalId].database_name" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库用户">
+          <a-input placeholder="请输入数据库用户" v-model:value="specialModalData[specialModalId].database_username" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库密码">
+          <a-input-password placeholder="请输入数据库密码" v-model:value="specialModalData[specialModalId].database_password" allow-clear />
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </a-modal>
 </template>
 
@@ -147,12 +185,22 @@ const fieldName = ref("");
 const dataList = ref([]);
 const fieldTypeSel = ref([]);
 const fieldNumTypeSel = ref([]);
+const specialVisible = ref(false);
+const specialModalId = ref();
 const pageState = reactive({
   page: 1,
   perPage: 20,
   total: 0,
 });
 const editableData = reactive({});
+const specialModalData = reactive({
+  drive_type: undefined,
+  database_address: undefined,
+  database_port: undefined,
+  database_name: undefined,
+  database_username: undefined,
+  database_password: undefined,
+});
 
 watch(
   () => props.open,
@@ -160,7 +208,7 @@ watch(
     if (newVal) {
       toGetList();
     }
-  }
+  },
 );
 
 onMounted(() => {
@@ -214,9 +262,16 @@ const addField = () => {
     is_search: 0,
     field_type_id: undefined,
     belong_to_table: undefined,
+    is_other_database: 0,
     original_type: undefined,
     original_sql: undefined,
     sort: 0,
+    drive_type: undefined,
+    database_address: undefined,
+    database_port: undefined,
+    database_name: undefined,
+    database_username: undefined,
+    database_password: undefined,
   };
   dataList.value.unshift(item);
   editableData[item.field_id] = {
@@ -238,6 +293,21 @@ const handleCancel = (record) => {
   }
 };
 
+const openSpecialModal = (record) => {
+  specialVisible.value = true
+  specialModalId.value = record.field_id
+  if (!specialModalData[record.field_id]) {
+    specialModalData[record.field_id] = {
+      drive_type: undefined,
+      database_address: undefined,
+      database_port: undefined,
+      database_name: undefined,
+      database_username: undefined,
+      database_password: undefined,
+    }
+  }
+}
+
 const handleSave = (record) => {
   const params = {
     is_search: record.is_search,
@@ -245,7 +315,17 @@ const handleSave = (record) => {
     modular_id: props.modularId,
     original_type: record.original_type,
     original_sql: record.original_sql,
+    is_other_database: record.is_other_database,
   };
+  // 如果数据库特配弹框有数据
+  if (specialModalData[record.field_id]) {
+    params.drive_type = specialModalData[record.field_id].drive_type
+    params.database_address = specialModalData[record.field_id].database_address
+    params.database_port = specialModalData[record.field_id].database_port
+    params.database_name = specialModalData[record.field_id].database_name
+    params.database_username = specialModalData[record.field_id].database_username
+    params.database_password = specialModalData[record.field_id].database_password
+  }
   // 检验必填参数
   const validateFields = [
     { field: 'field_title', msg: "请填写字段标题" },