feat: 新增高级搜索和安需导出

src/components/Table/src/BasicTable.vue

@@ -230,7 +230,6 @@
 
   const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
     useTableForm(getProps, slots, fetch, getLoading);
-  console.log(getFormProps);
 
   const getBindValues = computed(() => {
     const dataSource = unref(getDataSourceRef);
@@ -343,7 +342,9 @@
       background-color: #262626;
     }
   }
-
+  .toolbar {
+    margin-bottom: 10px;
+  }
   .@{prefix-cls} {
     max-width: 100%;
     height: 100%;

src/views/project/detail.vue

@@ -16,6 +16,9 @@
         <a-button type="default" class="btn" preIcon="mdi:book-add" @click="handleContent">
           添加合同
         </a-button>
+        <a-button type="default" class="btn" preIcon="mdi:book-add" @click="importContract">
+          导入合同
+        </a-button>
         <a-button type="default" class="btn" preIcon="humbleicons:upload" @click="handleUpload">
           上传附件
         </a-button>
@@ -79,13 +82,14 @@
     </div>
     <projectDrawer @register="registerDrawer" @success="handleSuccess" />
     <contractDrawer @register="register2" @success="handleRegisterSuccess" />
-
+    <uploadContractModal @register="registerModal2" />
     <uploadModal @register="registerModal" @close="handleNewFile" />
   </div>
 </template>
 <script lang="ts" setup>
   import projectDrawer from './projectDrawer.vue';
   import uploadModal from './uploadModal.vue';
+  import uploadContractModal from './uploadContractModal.vue';
   import { Tabs } from 'ant-design-vue';
   import { useModal } from '@/components/Modal';
   import { getItem, deleteItem } from '@/api/project/project';
@@ -112,6 +116,7 @@
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [register2, { openDrawer: openDrawer2 }] = useDrawer();
   const [registerModal, { openModal: openModal }] = useModal();
+  const [registerModal2, { openModal: openModal2 }] = useModal();
   import contractDrawer from '@/views/contract/contractDrawer.vue';
   const tabs = {
     InvestmentPlan,
@@ -158,6 +163,11 @@
       projectId: detailId.value,
     });
   }
+  function importContract() {
+    openModal2(true, {
+      projectId: detailId.value,
+    });
+  }
   async function handleRegisterSuccess(params: any) {
     // handleNew(params);
   }

src/views/project/detail2.vue

-<template>
-  <div class="header">
-    <div class="header-tab">
-      <!-- <img class="header-tab-logo" src="../../assets/images/logo.png" alt="" /> -->
-      <img class="header-tab-logo" :src="detail.logo" />
-      <div class="header-tab-right">
-        <div class="header-tab-right-title">{{ detail.projectName }}</div>
-        <div class="header-tab-right-desc">{{ detail.projectName }}</div>
-      </div>
-    </div>
-    <div class="header-tool">
-      <a-button type="default" class="btn" preIcon="ri:edit-line" @click="handleEdit">
-        编辑项目
-      </a-button>
-      <a-button type="default" class="btn" preIcon="mdi:book-add" @click="handleContent">
-        添加合同
-      </a-button>
-      <a-button type="default" class="btn" preIcon="humbleicons:upload" @click="handleUpload">
-        上传附件
-      </a-button>
-      <a-button
-        type="default"
-        class="btn"
-        preIcon="ant-design:delete-outlined"
-        @click="handleDelete"
-      >
-        删除项目
-      </a-button>
-    </div>
-    <div class="header-body">
-      <div class="header-body-item">
-        <div class="header-body-item-title">实施主体</div>
-        <div class="header-body-item-value">{{ detail.implementingEntity }}</div>
-      </div>
-      <div class="header-body-item">
-        <div class="header-body-item-title">建设模式</div>
-        <div class="header-body-item-value">{{ detail.constructionMode }}</div>
-      </div>
-      <div class="header-body-item">
-        <div class="header-body-item-title">建设地点</div>
-        <div class="header-body-item-value">{{ detail.constructionSite }}</div>
-      </div>
-      <div class="header-body-item">
-        <div class="header-body-item-title">项目类型</div>
-        <div class="header-body-item-value">{{ detail.projectType }}</div>
-      </div>
-      <div class="header-body-item">
-        <div class="header-body-item-title">资金来源</div>
-        <div class="header-body-item-value">{{ detail.fundingSource }}</div>
-      </div>
-      <div class="header-body-item">
-        <div class="header-body-item-title">建设规模</div>
-        <div class="header-body-item-value">{{ detail.constructionScale }}</div>
-      </div>
-      <div class="header-body-item">
-        <div class="header-body-item-title">建设目的及项目功能</div>
-        <div class="header-body-item-value">{{ detail.constructionPurpose }}</div>
-      </div>
-      <div class="header-body-item">
-        <div class="header-body-item-title">更新人/更新时间</div>
-        <div class="header-body-item-value"
-          >{{ detail.updateBy || '--' }}/{{ detail.updateTime || '--' }}</div
-        >
-      </div>
-    </div>
-    <!-- <Descriptions></Descriptions> -->
-  </div>
-  <div class="body">
-    <Tabs>
-      <template v-for="item in tabList" :key="item.key">
-        <TabPane :tab="item.tab">
-          <component :is="tabs[item.component]" />
-        </TabPane>
-      </template>
-    </Tabs>
-  </div>
-  <projectDrawer @register="registerDrawer" @success="handleSuccess" />
-  <contractDrawer @register="register2" @success="handleRegisterSuccess" />
-
-  <uploadModal @register="registerModal" @close="handleNewFile" />
-</template>
-<script lang="ts" setup>
-  import projectDrawer from './projectDrawer.vue';
-  import uploadModal from './uploadModal.vue';
-  import { Tabs } from 'ant-design-vue';
-  import { useModal } from '@/components/Modal';
-  import { getItem, deleteItem } from '@/api/project/project';
-  import { tabList } from './project.data';
-  import { ref, onMounted, provide } from 'vue';
-  import { useRoute } from 'vue-router';
-  import { useDrawer } from '@/components/Drawer';
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { router } from '@/router';
-  import InvestmentPlan from './tabs/InvestmentPlan.vue';
-  import performance from './tabs/performance.vue';
-  import annualPlan from './tabs/annualPlan.vue';
-  import monthlyPlan from './tabs/monthlyPlan.vue';
-  import completed from './tabs/completed.vue';
-  import biddingPlan from './tabs/biddingPlan.vue';
-  import biddingManagement from './tabs/biddingManagement.vue';
-  import settlementManagement from './tabs/settlementManagement.vue';
-  import changeSignature from './tabs/changeSignature.vue';
-  import potentialSafety from './tabs/potentialSafety.vue';
-  import safetyEducation from './tabs/safetyEducation.vue';
-  import contract from './tabs/contract.vue';
-  import annex from './tabs/annex.vue';
-  import updateRecords from './tabs/updateRecords.vue';
-  const [registerDrawer, { openDrawer }] = useDrawer();
-  const [register2, { openDrawer: openDrawer2 }] = useDrawer();
-  const [registerModal, { openModal: openModal }] = useModal();
-  import contractDrawer from '@/views/contract/contractDrawer.vue';
-  const tabs = {
-    InvestmentPlan,
-    performance,
-    annualPlan,
-    monthlyPlan,
-    completed,
-    biddingPlan,
-    biddingManagement,
-    settlementManagement,
-    changeSignature,
-    potentialSafety,
-    safetyEducation,
-    contract,
-    annex,
-    updateRecords,
-  };
-  const TabPane = Tabs.TabPane;
-  const { createMessage } = useMessage();
-
-  let detail = ref<any>({});
-  let detailId = ref<any>(0);
-  // onMounted(async () => {
-  const route = useRoute();
-  detailId.value = route.query.id; // 获取名为id的参数
-  provide('detailId', detailId.value);
-  handleDetail();
-  // });
-
-  function handleEdit() {
-    openDrawer(true, {
-      record: detail,
-      isUpdate: true,
-    });
-  }
-  function handleContent() {
-    openDrawer2(true, {
-      projectId: detailId.value,
-      isUpdate: false,
-    });
-  }
-  function handleUpload() {
-    openModal(true, {
-      projectId: detailId.value,
-    });
-  }
-  async function handleRegisterSuccess(params: any) {
-    // handleNew(params);
-  }
-  async function handleSuccess(record: any) {
-    // detail.value = record;
-    await handleDetail();
-  }
-  async function handleDetail() {
-    let res = await getItem({ id: detailId.value });
-    detail.value = res;
-    console.log(detail.value);
-  }
-  function handleDelete() {
-    deleteItem({ id: detailId.value }).then((res) => {
-      createMessage.success('删除成功!');
-      router.back();
-    });
-  }
-  function handleNewFile() {}
-</script>
-<style lang="less" scoped>
-  .header {
-    background-color: #ffffff;
-    margin: 0 16px;
-    margin-top: 16px;
-    height: 208px;
-    position: relative;
-    &-tool {
-      position: absolute;
-      right: 0;
-      top: 0;
-      padding-top: 20px;
-      padding-right: 20px;
-      .btn {
-        margin-left: 10px;
-      }
-    }
-    &-tab {
-      padding: 30px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      &-logo {
-        border-radius: 100%;
-        width: 72px;
-        height: 72px;
-        margin-right: 10px;
-      }
-      &-right {
-        display: flex;
-        flex-flow: column;
-        color: #1c1c1c;
-        &-title {
-          font-size: 36px;
-        }
-        &-desc {
-          font-size: 14px;
-          margin-top: 6px;
-        }
-      }
-    }
-    &-body {
-      display: flex;
-      flex-wrap: wrap;
-      &-item {
-        flex: 1;
-        &-title {
-          text-align: center;
-          color: #536387;
-          font-size: 14px;
-        }
-        &-value {
-          text-align: center;
-          color: #000000;
-          margin-top: 16px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-</style>
-<style lang="less">
-  .body {
-    margin: 16px;
-    padding: 10px 22px;
-    background-color: #ffffff;
-    .vben-basic-table-form-container {
-      padding: 0 !important;
-    }
-    .page-card {
-      padding: 0 !important;
-    }
-    .page-card-body {
-      padding: 0 !important;
-    }
-  }
-</style>

src/views/project/tabs/InvestmentPlan.vue

 <template>
   <BasicTable @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary" preIcon="mdi:plus" @click="handleExport"> 导出筛选结果 </a-button>
+      <a-button type="primary" class="ml5" preIcon="mdi:plus" @click="handleExport">
+        高级筛选
+      </a-button>
+    </template>
+
     <template #bodyCell="{ column, record, index }">
       <template v-if="column.key === 'serialNumber'">
         {{ index + 1 }}
@@ -19,15 +26,34 @@
       </template>
     </template>
   </BasicTable>
+  <exportModal @register="registerModal" />
+  <queryModal @register="registerModal2" />
 </template>
 <script lang="ts" setup>
+  import exportModal from './components/exportModal.vue';
+  import queryModal from './components/queryModal.vue';
   import { columns, searchFormSchema } from './data';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { inject } from 'vue';
+  import { inject, ref } from 'vue';
   import { getEngineeringList } from '@/api/project/engineeringProject';
   import { router } from '@/router';
+  import { useModal } from '@/components/Modal';
+  const [registerModal, { openModal: openModal }] = useModal();
+  const [registerModal2, { openModal: openModal2 }] = useModal();
   let detailId = inject('detailId');
   console.log('detailId', detailId);
+
+  function getExportData() {
+    let exportData = [];
+    columns.map((i) => {
+      exportData.push({
+        label: i.title,
+        value: i.dataIndex,
+      });
+    });
+    return exportData;
+  }
+  getExportData();
   const [registerTable, { reload }] = useTable({
     api: getEngineeringList,
     columns,
@@ -50,6 +76,12 @@
       fixed: undefined,
     },
   });
+  function handleExport() {
+    openModal(true, {
+      projectId: detailId,
+      exportData: getExportData(),
+    });
+  }
   function handleDetail(record: Recordable, disabled: number) {
     if (record.planType === '工程') {
       router.push({

src/views/project/tabs/components/exportModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="导出筛选结果"
+    :minHeight="30"
+    okText="导出"
+    @ok="handleSubmit"
+    @visible-change="handleVisibleChange"
+  >
+    <BasicForm @register="registerForm" :model="modelRef" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, nextTick, defineProps, defineEmits, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { uploadApi } from '@/api/sys/upload';
+  import { AnnexAdd } from '@/api/project/project';
+  const projectId = ref(0);
+  const schemas: FormSchema[] = [
+    {
+      field: 'colums',
+      component: 'CheckboxGroup',
+      label: '',
+      required: true,
+      componentProps: {
+        options: [],
+      },
+      colProps: {
+        span: 24,
+      },
+    },
+  ];
+  const props = defineProps({
+    userData: { type: Object },
+  });
+  function handleVisibleChange(v) {
+    v && props.userData && nextTick(() => onDataReceive(props.userData));
+  }
+  const emit = defineEmits(['close', 'register']);
+  const modelRef = ref({});
+  const [
+    registerForm,
+    {
+      getFieldsValue,
+      validate,
+      updateSchema,
+      //   // setFieldsValue,
+      // setProps,
+    },
+  ] = useForm({
+    labelWidth: 120,
+    schemas,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  const [register, { closeModal }] = useModalInner((data) => {
+    console.log(111);
+
+    data && onDataReceive(data);
+  });
+
+  // function handleVisibleChange(v) {
+  //   v && props.userData && nextTick(() => onDataReceive(props.userData));
+  // }
+
+  function onDataReceive(data) {
+    console.log('Data Received', data.exportData);
+    updateSchema({
+      field: 'colums',
+      componentProps: {
+        options: data.exportData,
+      },
+    });
+    // console.log(props.userData);
+
+    // projectId.value = data.projectId;
+    // console.log(projectId.value);
+  }
+  function handleSubmit() {
+    validate().then(async () => {
+      const value = getFieldsValue();
+      console.log(value);
+
+      emit('close');
+      closeModal();
+    });
+  }
+</script>

src/views/project/tabs/components/queryModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="高级筛选"
+    :minHeight="30"
+    okText="提交"
+    @ok="handleSubmit"
+    @visible-change="handleVisibleChange"
+  >
+    <BasicForm @register="registerForm" :model="modelRef" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, nextTick, defineProps, defineEmits, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { uploadApi } from '@/api/sys/upload';
+  import { AnnexAdd } from '@/api/project/project';
+  const projectId = ref(0);
+  const schemas: FormSchema[] = [
+    {
+      field: 'colums',
+      component: 'CheckboxGroup',
+      label: '',
+      required: true,
+      componentProps: {
+        options: [],
+      },
+      colProps: {
+        span: 24,
+      },
+    },
+  ];
+  const props = defineProps({
+    userData: { type: Object },
+  });
+  function handleVisibleChange(v) {
+    v && props.userData && nextTick(() => onDataReceive(props.userData));
+  }
+  const emit = defineEmits(['close', 'register']);
+  const modelRef = ref({});
+  const [
+    registerForm,
+    {
+      getFieldsValue,
+      validate,
+      updateSchema,
+      //   // setFieldsValue,
+      // setProps,
+    },
+  ] = useForm({
+    labelWidth: 120,
+    schemas,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  const [register, { closeModal }] = useModalInner((data) => {
+    console.log(111);
+
+    data && onDataReceive(data);
+  });
+
+  // function handleVisibleChange(v) {
+  //   v && props.userData && nextTick(() => onDataReceive(props.userData));
+  // }
+
+  function onDataReceive(data) {
+    console.log('Data Received', data.exportData);
+    updateSchema({
+      field: 'colums',
+      componentProps: {
+        options: data.exportData,
+      },
+    });
+    // console.log(props.userData);
+
+    // projectId.value = data.projectId;
+    // console.log(projectId.value);
+  }
+  function handleSubmit() {
+    validate().then(async () => {
+      const value = getFieldsValue();
+      console.log(value);
+
+      emit('close');
+      closeModal();
+    });
+  }
+</script>

src/views/project/tabs/data.ts

@@ -17,6 +17,7 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 5 },
   },
 ];
+
 export const columns: BasicColumn[] = [
   {
     title: '序号',
@@ -25,22 +26,22 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '填报周期',
-    dataIndex: 'serialNumber',
+    dataIndex: 'filingCycle',
     width: 180,
   },
   {
     title: '项目名称',
-    dataIndex: 'serialNumber',
+    dataIndex: 'projectName',
     width: 180,
   },
   {
     title: '建设地点',
-    dataIndex: 'serialNumber',
+    dataIndex: 'constructionSite',
     width: 180,
   },
   {
     title: '项目概况',
-    dataIndex: 'serialNumber',
+    dataIndex: 'projectOverview',
     width: 180,
   },
   {
@@ -50,27 +51,27 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '建设目的及项目功能',
-    dataIndex: 'serialNumber',
+    dataIndex: 'constructionPurpose',
     width: 180,
   },
   {
     title: '建设模式',
-    dataIndex: 'serialNumber',
+    dataIndex: 'constructionMode',
     width: 180,
   },
   {
     title: '资金来源',
-    dataIndex: 'serialNumber',
+    dataIndex: 'fundingSource',
     width: 180,
   },
   {
     title: '项目类型',
-    dataIndex: 'serialNumber',
+    dataIndex: 'projectType',
     width: 180,
   },
   {
     title: '总投资',
-    dataIndex: 'serialNumber',
+    dataIndex: 'totalInvestment',
     width: 180,
   },
   {

src/views/project/uploadContractModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="上传附件"
+    :minHeight="30"
+    okText="保存"
+    @ok="handleSubmit"
+    @visible-change="handleVisibleChange"
+  >
+    <BasicForm @register="registerForm" :model="modelRef" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, nextTick, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { uploadApi } from '@/api/sys/upload';
+  import { AnnexAdd } from '@/api/project/project';
+  const projectId = ref(0);
+  const schemas: FormSchema[] = [
+    {
+      field: 'url',
+      component: 'Upload',
+      label: '上传附件',
+      required: true,
+      componentProps: {
+        api: uploadApi,
+        resultField: 'data.data.fullPath',
+        accept: ['rar', 'zip', 'doc', 'docx', 'pdf'],
+        multiple: false,
+        maxSize: 20,
+        maxNumber: 1,
+        name: 'multipartFile',
+      },
+      colProps: {
+        span: 24,
+      },
+    },
+    {
+      field: 'remarks',
+      label: '备注内容',
+      // required: true,
+      component: 'InputTextArea',
+      componentProps: {
+        maxlength: 300,
+        showCount: true,
+      },
+      colProps: { span: 24 },
+    },
+  ];
+  const props = defineProps({
+    userData: { type: Object },
+  });
+  const emit = defineEmits(['close', 'register']);
+  const modelRef = ref({});
+  const [
+    registerForm,
+    {
+      getFieldsValue,
+      validate,
+      //   // setFieldsValue,
+      //   // setProps
+    },
+  ] = useForm({
+    labelWidth: 120,
+    schemas,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  const [register, { closeModal }] = useModalInner((data) => {
+    data && onDataReceive(data);
+  });
+
+  function onDataReceive(data) {
+    console.log('Data Received', data);
+    projectId.value = data.projectId;
+    console.log(projectId.value);
+  }
+
+  function handleVisibleChange(v) {
+    v && props.userData && nextTick(() => onDataReceive(props.userData));
+  }
+
+  function handleSubmit() {
+    validate().then(async () => {
+      const value = getFieldsValue();
+      let url: String = value.url[0];
+      let res = await AnnexAdd({
+        url,
+        remark: value.remarks,
+        proId: projectId.value,
+      });
+      //   console.log(res);
+
+      emit('close');
+      closeModal();
+    });
+  }
+</script>

src/views/project/uploadModal.vue

@@ -52,7 +52,6 @@
   const props = defineProps({
     userData: { type: Object },
   });
-  const emit = defineEmits(['close']);
   const modelRef = ref({});
   const [
     registerForm,
@@ -84,7 +83,7 @@
   function handleVisibleChange(v) {
     v && props.userData && nextTick(() => onDataReceive(props.userData));
   }
-
+  const emit = defineEmits(['close', 'register']);
   function handleSubmit() {
     validate().then(async () => {
       const value = getFieldsValue();