liqh 6 месяцев назад
Родитель
Сommit
ec63a7daa6

+ 56 - 0
src/views/support-manage/competition/opponent/create-opponent/components/TableInfoSelect.vue

@@ -0,0 +1,56 @@
+<template>
+  <bs-modal-table-selector
+    :selected-keys="selectedKeys"
+    :bs-modal="bsModalBean"
+    :bs-table="bsTableBean"
+    @ok="handleConfirm"
+  ></bs-modal-table-selector>
+</template>
+
+<script setup lang="jsx">
+  import BsModalTableSelector from '/@/components/BsUi/ModalTableSelector/index.vue';
+  import { ref } from 'vue';
+  import { useBsTable } from '/@/components/BsUi/Table/index.js';
+  import { useBsModal } from '/@/components/BsUi/Modal/index.js';
+
+  const emit = defineEmits(['selectedRowList']);
+  // 接收父组件传递的 bsTableBean
+  const props = defineProps({
+    bsTableBean: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  // 用于回显勾中的行
+  const selectedKeys = ref([]);
+
+  const bsModalBean = useBsModal({
+    modalOptions: {
+      width: '900px',
+      visible: false,
+      title: '表格选择器开窗',
+      modalExtraProps: {
+        destroyOnClose: true,
+      },
+    },
+  });
+
+  const { setModalPropsValue: setMVal } = bsModalBean;
+
+  const handleConfirm = ({ value, setLoading, close }) => {
+    // 将 value 发送给父组件
+    emit('selectedRowList', value);
+    close();
+    setLoading(false);
+  };
+
+  const showModal = () => {
+    selectedKeys.value = [];
+    setMVal('visible', true);
+  };
+
+  defineExpose({
+    showModal,
+  });
+</script>

+ 87 - 5
src/views/support-manage/competition/opponent/create-opponent/index.vue

@@ -16,7 +16,8 @@
             <a-row :gutter="24" class="smart-query-form-row">
               <a-col :span="16">
                 <a-form-item label="竞争对手名称" name="regionType" class="smart-query-form-item">
-                   <a-input v-model:value="formModel.customerName" placeholder="请输入竞争对手名称" />
+                  <a-input v-model:value="formModel.customerName" placeholder="请输入竞争对手名称" @click="showSelectProj" />
+                  <table-info-select ref="customerSelectRef" @selectedRowList="handleSelect" :bs-table-bean="bsTableBean" />
                 </a-form-item>
               </a-col>
               <a-col :span="8">
@@ -28,7 +29,7 @@
             <a-row :gutter="24" class="smart-query-form-row">
               <a-col :span="8">
                 <a-form-item label="属性" name="customerName" class="smart-query-form-item">
-                   <DictSelect
+                  <DictSelect
                     key-code="BLINK_CUSTOMER_REGION_TYPE"
                     v-model:value="formModel.regionType"
                     placeholder="请选择属性"
@@ -39,7 +40,7 @@
               </a-col>
               <a-col :span="8">
                 <a-form-item label="注册资本" name="customerType" class="smart-query-form-item">
-                  <a-input-number v-model:value="formModel.customerName" placeholder="请输入注册资本" style="width: 100%;" addon-after="元"/>
+                  <a-input-number v-model:value="formModel.customerName" placeholder="请输入注册资本" style="width: 100%" addon-after="元" />
                 </a-form-item>
               </a-col>
               <a-col :span="8">
@@ -67,7 +68,7 @@
               </a-col>
               <a-col :span="8">
                 <a-form-item label="员工人数" name="postalCode" class="smart-query-form-item">
-                  <a-input-number v-model:value="formModel.customerName" placeholder="请输入员工人数" style="width: 100%;" addon-after="人"/>
+                  <a-input-number v-model:value="formModel.customerName" placeholder="请输入员工人数" style="width: 100%" addon-after="人" />
                 </a-form-item>
               </a-col>
             </a-row>
@@ -148,6 +149,7 @@
   </a-card>
 </template>
 <script setup>
+  import { useBsTable } from '/@/components/BsUi/Table/index.js';
   import { onMounted, reactive, ref, useAttrs, watch } from 'vue';
   import { useRouter } from 'vue-router';
   import { message, Modal } from 'ant-design-vue';
@@ -157,6 +159,7 @@
   import DictSelect from '/@/components/support/dict-select/index.vue';
   import Upload from '/@/components/support/file-upload/index.vue';
   import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
+  import tableInfoSelect from '/@/views/support-manage/competition/opponent/create-opponent/components/TableInfoSelect.vue';
 
   const stepFormRef = ref(null);
   const router = useRouter();
@@ -189,7 +192,7 @@
   // ----------------------- 步骤相关 ---------------------------
 
   const submit = () => {
-  for (let i = 0; i < scheduleList.value.length; i++) {
+    for (let i = 0; i < scheduleList.value.length; i++) {
       formModel.children = scheduleList.value;
     }
     console.log('formModel', formModel);
@@ -299,6 +302,85 @@
   };
   //重置表单数据
   function resetFromDate() {}
+  //------------------------------表格数据选择器-------------------------------------
+
+  const customerSelectRef = ref(null);
+
+  //表格选择器配置项
+  const bsTableBean = useBsTable({
+    tableOptions: {
+      isLoadRequest: false,
+      url: '/supports/customer/queryPage',
+      gridOptions: {
+        loading: false,
+        columns: [
+          {
+            field: 'id',
+            title: 'ID',
+          },
+          {
+            field: 'customerName',
+            title: '甲方名称',
+          },
+          {
+            field: 'customerType',
+            title: '甲方类型',
+            cellRender: {
+              name: 'CellDict',
+            },
+          },
+          {
+            field: 'provinceCityDistrict',
+            title: '省市区',
+          },
+        ],
+      },
+      searchConfig: {
+        enabled: false,
+        fieldSpan: 4,
+        fields: [
+          {
+            field: 'customerName',
+            label: '',
+            component: 'a-input',
+            componentProps: {
+              placeholder: '请输入客户名称',
+            },
+          },
+        ],
+      },
+      pagerConfig: {
+        enable: true,
+        pageSize: 10,
+        pageNum: 1,
+      },
+      toolbarConfig: {
+        enable: false,
+      },
+      // 每次查询接口之前,都会调用这个回调函数
+      tableSearchBeforeBiz() {
+        console.log('表格搜索前');
+      },
+      // 表格初始化之前,只加载一次
+      beforeMount() {
+        console.log('表格加载前');
+      },
+      // 表格初始化完成,只加载一次
+      mounted(gridRef) {
+        console.log('表格加载后', gridRef);
+      },
+    },
+  });
+
+  //表格选择器开窗
+  function showSelectProj() {
+    customerSelectRef.value.showModal();
+  }
+
+  //表格选择器数据回显
+  function handleSelect(data) {
+    console.log('data', data);
+  }
 </script>
 
 <style scoped lang="less">

+ 1 - 1
src/views/support-manage/competition/opponent/index.vue

@@ -10,7 +10,7 @@
       </template>
       <template #slotVue_default="{}">
         <a-dropdown>
-          <a class="ant-dropdown-link" @click.prevent> 累计资质管理 </a>
+          <a class="ant-dropdown-link" @click.prevent> 12项 </a>
           <template #overlay>
             <a-menu>
               <a-menu-item>