试用管理完成

src/api/modules/businessCustom.js

@@ -161,4 +161,21 @@ export const businessCustomInterence = {
     setConfigList:(params)=>{
         return post('/eta_business/api/config/set',params)
     },
+    /**
+     * 获取社区图表分类权限
+     * @param EtaBusinessId 商家ID
+     * @returns 
+     */
+    getChartPermission:(params)=>{
+        return get('/eta_business/get_chart_permission',params)
+    },
+     /**
+     * 设置社区图表分类权限
+     * @param EtaBusinessId 商家ID
+     * @param ChartClassifyIdStr 选中的权限 ID 字符串，逗号分隔
+     * @returns 
+     */
+     addChartPermission:(params)=>{
+        return post('/eta_business/add_chart_permission',params)
+    },
 }

src/views/business_manage/addBusiness.vue

@@ -176,7 +176,13 @@
           </div>
         </template>
         <template v-if="currentStep  === 3">
-
+          <div class="second-step-form-wrap tree">
+            <SetPermission 
+              :isShowFoot="false"
+              :PermissionList="PermissionList"
+              :allCheckedList="allCheckedList"
+              ref="permissionRef"/>
+          </div>
         </template>
 
         <div class="btns-box" v-if="currentRoute === 'addBusiness'">
@@ -191,10 +197,10 @@
 <script setup>
 import { ref, reactive, onMounted, useTemplateRef } from 'vue';
 import Steps from "./components/Steps.vue";
+import SetPermission from "./components/SetPermission.vue";
 import { customInterence, roadshowInterence, businessCustomInterence } from '@/api/api.js';
 import { locationOptions } from '@/utils/location';
 import countryData from "@/utils/countryData";
-import 'element-plus/es/components/popover/style/css'
 import { useRoute, useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -203,7 +209,7 @@ const route = useRoute()
 const currentRoute = ref(route.name);
 const businessId = ref(Number(route.query.id || 0));
 // 响应式状态
-const currentStep  = ref(1);
+const currentStep = ref(1);
 const firstFormEl = useTemplateRef('firstFormEl')
 const formRef = useTemplateRef('formRef');
 const cascaderNode = ref({});
@@ -211,6 +217,10 @@ const recordData = ref([]);
 const activities = ref([]);
 const countryDataReactive = reactive(countryData);
 const locationOptionsReactive = reactive(locationOptions);
+const permissionRef = ref(null);
+const PermissionList = ref([]);
+const allCheckedList = ref([]);
+const handleEtaBusinessId = ref(0);
 const firstFormData = reactive({
   areaType: '国内',
   name: '',
@@ -312,8 +322,10 @@ onMounted(() => {
   } else if (currentRoute.value === 'editBusiness') { // 修改
     fetchChosenData()
     fetchBusinessData()
+    getChartPermission(businessId.value)
   } else if (currentRoute.value === 'businessDetail') { // 查看详情
     fetchBusinessData()
+    getChartPermission(businessId.value)
   }
 });
 
@@ -326,6 +338,19 @@ watchEffect(() => {
   }
 });
 
+const getChartPermission = async (EtaBusinessId) => {
+  try {
+    const res = await businessCustomInterence.getChartPermission({
+      EtaBusinessId: EtaBusinessId
+    });
+    if (res.Ret !== 200) return;
+    PermissionList.value = res.Data.List;
+    allCheckedList.value = res.Data.CheckList
+  } catch (error) {
+    console.error('获取图表权限失败:', error);
+  }
+};
+
 // 获取选择数据
 const fetchChosenData = async () => {
   await getIndustry();
@@ -410,7 +435,8 @@ const normalizingParams = (params) => {
     ResearchTeamSize: params.teamSize,
     UserMax: Number(params.userMax),
     SigningTime: params.signDate || '',
-    ExpiredTime: params.expirationDate || ''
+    ExpiredTime: params.expirationDate || '',
+    IsCheck: params.IsCheck,
   };
 };
 
@@ -420,28 +446,32 @@ const handleStepSecond = async (stepName) => {
 
   if (stepName === 'first') {
     validRes = await firstFormEl.value.validate();
-    params = normalizingParams(firstFormData);
+    params = normalizingParams({ IsCheck: true,  ...firstFormData });
   } else {
-    params = normalizingParams({ ...firstFormData, ...secondFormData });
+    params = normalizingParams({ IsCheck: false,  ...firstFormData, ...secondFormData });
     validRes = await formRef.value.validate();
   }
 
   if (validRes !== true) return;
-
-  businessCustomInterence.addBusiness({ IsCheck: true, ...params }).then(res => {
+  businessCustomInterence.addBusiness(params).then(res => {
     if (res.Ret === 200) {
       currentStep .value++;
+      handleEtaBusinessId.value = res.Data.EtaBusinessId
+      if (params.IsCheck === false) {
+        getChartPermission(res.Data.EtaBusinessId) // 获取图表权限列表
+      }
     }
   });
 };
 
-const handleAddBusiness = () => {
-  const params = normalizingParams({ ...firstFormData, ...secondFormData });
-  businessCustomInterence.addBusiness({ IsCheck: false, ...params }).then(res => {
-    if (res.Ret !== 200) return;
-    MessagePlugin.success('添加成功');
-    router.push('/customer/businessList');
+const handleAddBusiness = async () => {
+  const res = await businessCustomInterence.addChartPermission({
+    ChartClassifyIdStr: permissionRef.value.allChecked.join(',')||'',
+    EtaBusinessId: handleEtaBusinessId.value  === 0 ? businessId.value : handleEtaBusinessId.value
   });
+  if (res.Ret !== 200) return;
+  MessagePlugin.success('添加成功');
+  router.push('/customer/businessList');
 };
 
 const selectRegion = (e, context) => {
@@ -479,11 +509,6 @@ const changeActiveStep = (index) => {
 
 
 </script>
-<style lang="scss">
-.el-popover {
-  width: 360px !important;
-}
-</style>
 <style lang="scss" scoped>
 .add-business{
     padding:30px;
@@ -511,6 +536,9 @@ const changeActiveStep = (index) => {
             }
         }
     }
+    .tree {
+      padding: 30px 0;
+    }
 }
 .btns-box{
     position: fixed;

src/views/business_manage/businessAuth.vue

@@ -7,21 +7,24 @@
                 <t-button theme="primary" @click="handleBtnClik('save')">保存</t-button>
             </div>
         </div>
-        <div class="model-wrap">
-            <t-button :type="model==='auth'?'primary':''" @click="model='auth'">菜单权限</t-button>
-        </div>
-        <div class="auth-wrap" v-show="model==='auth'">
+        <div class="auth-wrap">
             <t-checkbox v-model="checkAll" :indeterminate="isIndeterminate" style="margin-bottom: 20px;">全选</t-checkbox>
             <t-tree 
                 v-loading="treeLoading"
-                ref="checkboxTree"
+                ref="refCheckboxTree"
                 :data="authList" 
-                :props="{label:'Name',children:'Children'}" 
+                :keys="{label:'Name',children:'Children', value:'MenuId'}" 
                 :default-expand-all="false"
                 show-checkbox 
                 node-key="MenuId"
-                :default-checked-keys="defaultCheckedKeys"
-                @check-change="()=>{handleCheckChange()}">
+
+                v-model="defaultCheckedKeys"
+                :checkable="true"
+                :check-strictly="false"
+                :value-mode="'onlyLeaf'"
+                hover
+                @change="handleCheckChange"
+                >
             </t-tree>
         </div>
     </div>
@@ -41,42 +44,7 @@ const defaultCheckedKeys = ref([]);
 const treeLoading = ref(false);
 const checkAll = ref(false);
 const isIndeterminate = ref(false);
-const model = ref('auth');
-const isApprove = ref('');
-const approveList = ref([]);
-const checkList = ref([]);
-
-// 获取业务配置列表
-const getBusinessConfigList = async () => {
-  const EtaBusinessId = Number(route.query.id);
-  if (!EtaBusinessId) return;
-
-  try {
-    const res = await businessCustomInterence.getConfigList({ EtaBusinessId });
-    if (res.Ret !== 200) return;
-
-    const list = res.Data || [];
-    const approveItem = list.find(i => i.ConfigCode === 'approval_flow');
-    if (!approveItem) return;
-
-    if (!approveItem.ConfigValue.length) {
-      isApprove.value = approveItem.ConfigValue;
-      return;
-    }
-
-    if (Number(approveItem.ConfigValue) === 0) {
-      isApprove.value = Number(approveItem.ConfigValue);
-      return;
-    }
 
-    if (Number(approveItem.ConfigValue) > 0) {
-      isApprove.value = 1;
-      approveList.value = approveItem.ConfigValue === 3 ? [1, 2] : [Number(approveItem.ConfigValue)];
-    }
-  } catch (error) {
-    console.error('获取业务配置列表失败:', error);
-  }
-};
 
 // 获取业务权限列表
 const getBusinessAuthList = async () => {
@@ -94,13 +62,12 @@ const getBusinessAuthList = async () => {
 
     const { List = [], ChoiceList = [], HalfChoiceList = [] } = res.Data;
     authList.value = List;
-    checkList.value = ChoiceList;
 
     authList.value.forEach(item => checkTree(item));
 
     await nextTick();
     authList.value.forEach(item => checkTree(item));
-    defaultCheckedKeys.value = checkList.value;
+    defaultCheckedKeys.value = ChoiceList;
     handleCheckChange(defaultCheckedKeys.value);
   } catch (error) {
     console.error('获取业务权限列表失败:', error);
@@ -113,52 +80,21 @@ const checkTree = (data) => {
   if (data.Children && data.Children.length) {
     data.Children = data.Children.map(i => checkTree(i));
   }
-
-  if (!data.Children || (data.Children && data.Children.length === 0)) {
-    checkDataList(data);
-  }
-
   return data;
 };
 
-// 根据MenuId找到对应节点
-const findTreeNode = (MenuId) => {
-  // 假设这是一个自定义的checkboxTree组件的方法，需要根据实际情况调整
-  return refCheckboxTree.value.getNode(MenuId);
-};
-
-// 检查数据列表
-const checkDataList = (data) => {
-  if (!checkList.value.includes(data.MenuId) && checkList.value.includes(data.ParentId)) {
-    const index = checkList.value.indexOf(data.ParentId);
-    if (index !== -1) checkList.value.splice(index, 1);
-    console.log('应该去除的节点', data.ParentId);
-  }
-
-  const parentNode = findTreeNode(data.ParentId);
-  if (parentNode) {
-    checkDataList(parentNode.data);
-  }
-};
 
 // 处理按钮点击
 const handleBtnClik = async (type) => {
   if (type === 'save') {
-    const keys = refCheckboxTree.value.getCheckedKeys();
-    const halfKeys = refCheckboxTree.value.getHalfCheckedKeys();
-
-    if (!keys.length && !halfKeys.length) {
+    if (!defaultCheckedKeys.value.length) {
       MessagePlugin.warning('请至少选择一个权限');
       return;
     }
-
-    const ChoiceList = Array.from(new Set([...keys, ...halfKeys]));
-
     try {
       const res = await businessCustomInterence.setAuthList({
         EtaBusinessId: Number(route.query.id),
-        MenuIds: ChoiceList,
-        HalfMenuIds: halfKeys,
+        MenuIds: defaultCheckedKeys.value,
       });
       if (res.Ret !== 200) return;
       MessagePlugin.success('权限设置成功');
@@ -168,12 +104,12 @@ const handleBtnClik = async (type) => {
   }
 
   // 路由跳转
-  router.push('/businessETAList');
+  router.push('/customer/businessList');
 };
 
 // 处理复选框变化
 const handleCheckChange = (choiceList) => {
-  const keys = choiceList || refCheckboxTree.value.getCheckedKeys();
+  const keys = choiceList || defaultCheckedKeys.value || [];
   const ChoiceList = Array.from(new Set([...keys]));
   const topLevelNodes = authList.value.map(i => i.MenuId);
   let nodeLength = 0;
@@ -198,27 +134,23 @@ watch(
   (newVal) => {
     if (newVal) {
       const topLevelNodes = authList.value.map(i => i.MenuId);
-      refCheckboxTree.value.setCheckedKeys(topLevelNodes);
+      // refCheckboxTree.value.setCheckedKeys(topLevelNodes);
+      defaultCheckedKeys.value = topLevelNodes;
     } else {
-      if (!isIndeterminate.value) {
-        refCheckboxTree.value.setCheckedKeys([]);
+      console.log(isIndeterminate.value);
+      
+      if (isIndeterminate.value) {
+        defaultCheckedKeys.value = []
+        isIndeterminate.value = false;
+
       }
     }
   }
 );
 
-watch(
-  () => isApprove.value,
-  (newVal) => {
-    if (newVal === '0') {
-      approveList.value = [];
-    }
-  }
-);
 
 // 组件挂载时执行的函数
 onMounted(() => {
-  getBusinessConfigList();
   getBusinessAuthList();
 });
 
@@ -226,107 +158,6 @@ onMounted(() => {
 const refCheckboxTree = ref(null);
 </script>
 
-<style lang="scss">
-.business-auth-wrap{
-    .t-tree {
-        border-top: 1px solid #E5E7ED;
-        border-left: 1px solid #E5E7ED;
-        border-right: 1px solid #E5E7ED;
-        width: 98%;
-        margin-bottom: 40px;
-        .t-tree-node__label{
-            margin:10px;
-        }
-        .t-tree-node__content{
-            min-width: 200px;
-            width: 200px;
-            white-space: normal;
-            box-sizing: border-box;
-        }
-        .t-tree-node{
-            .t-tree-node{
-                .t-tree-node__children{
-                    width: 100%;
-                }
-                .t-tree-node{
-                    &:not(:first-child){
-                    /* .t-tree-node__content{
-                        border-right: 1px solid #E5E7ED;
-                    } */
-                        border-top: 1px solid #E5E7ED;
-                    }
-                    .t-tree-node__content{
-                        border-right: 1px solid #E5E7ED;
-                    }
-                }
-    
-            }
-        }
-        .t-tree-node__content {
-            padding: 5px 10px !important;
-            height: auto;
-            .t-tree-node__expand-icon.t-icon-caret-right {
-            //display: none;
-            }
-        }
-        > .t-tree-node {
-            padding: 0 !important;
-            display: flex;
-            border-bottom: 1px solid #E5E7ED;
-
-            > .t-tree-node__children {
-            width: 100%;
-            > .t-tree-node {
-                &:not(:first-child) {
-                border-top: 1px solid #E5E7ED;
-                }
-                >.t-tree-node__content{
-                    border-left: 1px solid #E5E7ED;
-                    border-right: 1px solid #E5E7ED;
-                }
-            }
-            }
-        }
-        .t-tree-node__children {
-            display: flex;
-            flex-direction: column;
-            .t-tree-node {
-                display: flex;
-                flex: 1;
-                padding: 0px !important;
-                .t-tree-node__content {
-                    border-bottom: none;
-                    .custom-tree-node {
-                    height: 24px;
-                    display: flex;
-                    align-items: center;
-                    .tree-btn {
-                        margin-left: 10px;
-                        display: none;
-                    }
-                    .t-button {
-                        padding: 0px !important;
-                        border-radius: 4px;
-                        background: #363554;
-                        color: #ffffff;
-                    }
-                    }
-                }
-                .t-tree-node__children {
-                    .t-tree-node {
-                    &:not(:first-child) {
-                        .t-tree-node__content {
-                        //border-left: none;
-                        }
-                    }
-                    }
-                }
-            }
-        }
-    }
-
-}
-</style>
 <style scoped lang="scss">
 .business-auth-wrap{
     border: 1px solid #ECECEC;

src/views/business_manage/businessList.vue

@@ -161,6 +161,21 @@
             @close="showModifySaller = false"
           />
       </t-dialog>
+      <!-- 社区权限设置 -->
+      <t-dialog
+        header="社区权限设置"
+        width="772px"
+        :visible.sync="showSetPermission"
+        @close="showSetPermission = false"
+        :footer="false"
+      >
+          <SetPermission
+            @setPermission="handleSetPermission"
+            @close="showSetPermission = false"
+            :isShowFoot="true"
+            :allCheckedList="allCheckedList"
+            :PermissionList="PermissionList" />
+      </t-dialog>
     </div>
   </template>
   
@@ -171,6 +186,7 @@
   import { locationOptions } from '@/utils/location';
   import AddRenewal from './components/AddRenewal.vue';
   import ModifySaller from './components/ModifySaller.vue';
+  import SetPermission from './components/SetPermission.vue';
   import countryData from '@/utils/countryData';
   import { SearchIcon } from 'tdesign-icons-vue-next';
   const router=useRouter()
@@ -226,6 +242,11 @@
   const modifyData = ref({});
   const dropdownVisible = reactive({});
   const reactiveLocationOptions = reactive(locationOptions);
+  const showSetPermission = ref(false);
+  const PermissionList = ref([]);
+  const allCheckedList = ref([]);
+  const handleEtaBusinessId = ref(0)
+
   
   const navigateToAdd = () => {
     // 导航到新增客户页面
@@ -338,8 +359,25 @@
     })
   };
   
-  const changePermissionStatus = (data) => {
-    // 处理权限变更逻辑
+  const changePermissionStatus = async ({EtaBusinessId}) => { // 权限设置弹窗
+    handleEtaBusinessId.value = EtaBusinessId;
+    const res = await businessCustomInterence.getChartPermission({
+      EtaBusinessId
+    });
+    if (res.Ret !== 200) return;
+    PermissionList.value = res.Data.List;
+    allCheckedList.value = res.Data.CheckList;
+    showSetPermission.value = true;
+  };
+
+  const handleSetPermission = async (allCheckedList) => {
+    const res = await businessCustomInterence.addChartPermission({
+      ChartClassifyIdStr: allCheckedList.join(','),
+      EtaBusinessId: handleEtaBusinessId.value
+    });
+    if (res.Ret !== 200) return;
+    MessagePlugin.success('权限修改成功');
+    showSetPermission.value = false;
   };
   
   const itemClickHandle = (type, data) => {

src/views/business_manage/components/SetPermission.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="add-renewal-wrap">
+        <t-input
+            :class="!props.isShowFoot ? 'input-wrap' : ''"
+            placeholder="分类名称"
+            v-model="searchTxt"
+            @change="changeSearchTxt"
+        >
+          <template #prefixIcon><SearchIcon /></template>
+        </t-input>
+        <div class="tree">
+            <t-tree
+                ref="tree"
+                v-model="allChecked"
+                :data="treeList"
+                :checkable="checkable"
+                :check-strictly="checkStrictly"
+                :keys="treeKeys"
+                :value-mode="valueMode"
+                hover
+                @change="onChange"
+                @click="onClick"
+                />
+        </div>
+        <div class="foot-container" v-if="isShowFoot">
+            <t-button theme="default" plain @click="handleClose">取消</t-button>
+            <t-button theme="primary" @click="handleSave">保存</t-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { SearchIcon } from 'tdesign-icons-vue-next';
+const props = defineProps({
+  isShowFoot: {
+    type: Boolean,
+    default: true,
+  },
+  PermissionList: {
+    type: Array,
+    default: [],
+  },
+  allCheckedList: {
+    type: Array,
+    default: [],
+  },
+});
+// emit事件
+const emit = defineEmits(['close', 'setPermission']);
+const searchTxt = ref('');
+ 
+// tree相关
+const treeList = ref([]);
+const tree = ref();
+const valueMode = ref('onlyLeaf');
+const checkable = ref(true);
+const checkStrictly = ref(false);
+const allChecked = ref([]);
+const treeKeys = reactive({
+    value: 'ChartClassifyId',
+    children: 'Children',
+    label: 'ChartClassifyName',
+});
+
+// 监听renewalForm的变化
+watch(
+  () => props.PermissionList,
+  (newValue) => {
+    if (newValue.length > 0) {
+        treeList.value = newValue;
+        allChecked.value = props.allCheckedList;
+    }
+  },
+  { immediate: true }
+);
+
+// tree相关
+const onClick = (context) => {
+  console.info('onClick context:', context);
+  const { node } = context;
+  console.info(node.value, 'onClick context.node.checked:', node.checked);
+};
+const onChange = (checked, context) => {
+  console.info('onChange checked:', checked, 'context:', context);
+  const { node } = context;
+  console.info(node.value, 'onChange context.node.checked:', node.checked);
+};
+
+// 保存按钮
+const handleSave = async () => {
+  emit('setPermission', allChecked.value);
+};
+// 搜索
+const changeSearchTxt = () => {
+
+}
+// 关闭弹窗
+const handleClose = () => {
+  emit('close');
+};
+
+defineExpose({
+    allChecked,
+})
+</script>
+<style scoped lang="scss">
+.add-renewal-wrap {
+    .input-wrap {
+        width: 360px;
+    }
+    .tree {
+        padding: 20px 0;
+    }
+    .foot-container {
+        padding:20px 0;
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+    }
+}
+</style>

src/views/business_manage/components/Steps.vue

@@ -49,8 +49,6 @@
   const emit = defineEmits(['changeActiveStep']);
   
   function changeActiveStep(index) {
-    console.log(!props.allowStepClick);
-    
     if (!props.allowStepClick) return;
     emit('changeActiveStep', index);
   }

src/views/etaMenu/etaMenuConfig.vue

@@ -184,9 +184,6 @@ onMounted(() => {
         background-color: #fff;
         display: flex;
         justify-content: space-between;
-        .el-input{
-            width:260px;
-        }
     }
     .menu-table{
         margin-top: 20px;

src/views/etaTrial/addApproval.vue

@@ -1,50 +1,48 @@
 <template>
   <div class="add-approval-wrap">
    <!--  {{tableData}} -->
-    <t-table :data="tableData"  :row-class-name="tableRowClassName" v-loading="pageLoading" border>
+    <t-table :data="tableData" lazyLoad :columns="tableColumn" :row-class-name="tableRowClassName" v-loading="pageLoading" :bordered="true" :table-layout="'auto'">
       <!-- 序号 -->
-      <t-table-column
+      <!-- <t-table-column
         type="index"
         width="50"
         label="序号"
         align="center"
-      />
+      /> -->
       <!-- 姓名 -->
-      <t-table-column label="姓名" min-width="100">
-        <template slot-scope="{row}">
+      <template #UserName="{ row }">
+        <div>
           <t-input v-model="row.UserName" :disabled="row.isApply" placeholder="姓名"></t-input>
-        </template>
-      </t-table-column>
+        </div>
+      </template>
       <!-- 公司名称 -->
-      <t-table-column label="公司名称" min-width="150">
-        <template slot-scope="{row}">
+      <template #CompanyName="{ row }">
+        <div>
           <t-input v-model="row.CompanyName" :disabled="row.isApply" placeholder="公司名称"></t-input>
-        </template>
-      </t-table-column>
+        </div>
+      </template>
       <!-- 职位 -->
-      <t-table-column label="职位" min-width="100">
-        <template slot-scope="{row}">
+      <template #Position="{ row }">
+        <div>
           <t-input v-model="row.Position" :disabled="row.isApply" placeholder="职位"></t-input>
-        </template>
-      </t-table-column>
+        </div>
+      </template>
       <!-- 手机号码 -->
-      <t-table-column label="手机号码" min-width="120">
-        <template slot-scope="{row}">
-          <t-input v-model.trim="row.Mobile" :disabled="row.isApply" placeholder="手机号码"></t-input>
-        </template>
-      </t-table-column>
+      <template #Mobile="{ row }">
+        <div>
+          <t-input v-model="row.Mobile" :disabled="row.isApply" placeholder="手机号码"></t-input>
+        </div>
+      </template>
       <!-- 操作 -->
-      <t-table-column label="操作" align="center">
-        <template slot-scope="{row,$index}">
-          <t-button type="text" size="small" @click="addTableData">添加</t-button>
-          <t-button type="text" size="small" class="color-hint" 
+      <template #opt="{ row, index }">
+        <t-button variant="text" theme="primary" size="small" @click="addTableData">添加</t-button>
+          <t-button variant="text" theme="primary" size="small" class="color-hint" 
             @click="deleteTableData($index)"
             v-if="(tableData.length>1&&!row.isApply)">删除</t-button>
-        </template>
-      </t-table-column>
+      </template>
     </t-table>
     <div class="btn-wrap">
-      <t-button type="primary" @click="handleApprove">提交申请</t-button>
+      <t-button theme="primary" @click="handleApprove">提交申请</t-button>
       <t-button @click="cancelApprove">取 消</t-button>
     </div>
     <!-- 提示弹窗 -->
@@ -59,198 +57,185 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
 import addApplyHintDialog from './compontents/addApplyHintDialog.vue';
-import{etaTrialInterence}from '@/api/modules/crmApi.js';
-export default {
-  components: { addApplyHintDialog },
-  data() {
-    return {
-      tableData:[{
-        isApply:false
-      }],
-      isAddApplyHintShow:false,
-      applyInfo:{},
-      repeatList:[],
-      pageLoading:false,
-      internalList:[],
-    };
-  },
-  methods: {
-    addTableData(){
-      this.tableData.push({isApply:false})
-    },
-    deleteTableData(index){
-      this.tableData.splice(index,1)
-    },
-    tableRowClassName({row}){
-      //提交后未通过的 账号已被禁止,账号已重复
-      if(row.isApply===false&&row.isPass===false){
-        return 'warning-row'
-      }
-      //提交前未校验通过的 四项数据未填写或填写错误
-      if(row.isApply===false&&row.isChecked===false){
-        return 'warning-row'
-      }
-      return ''
-    },
-    checkTableData(data){
-      let phoneArr = []
-      for(let i=0;i<data.length;i++){
-        const item = data[i]
-        //已经添加过的不再做校验 因为这条数据不会提交
-        if(item.isApply) continue
-        if((item.UserName&&!item.UserName.length)||!item.UserName){
-          this.$message.warning(`请输入第${i+1}条数据的姓名`)
-          return false
-        }
-        if((item.CompanyName&&!item.CompanyName.length)||!item.CompanyName){
-          this.$message.warning(`请输入第${i+1}条数据的公司名称`)
-          return false
-        }
-        if((item.Position&&!item.Position.length)||!item.Position){
-          this.$message.warning(`请输入第${i+1}条数据的职位`)
-          return false
-        }
-        if((item.Mobile&&!item.Mobile.length)||!item.Mobile){
-          this.$message.warning(`请输入第${i+1}条数据的电话号码`)
-          return false
-        }
-        if(phoneArr.indexOf(data[i].Mobile)===-1){
-          phoneArr.push(data[i].Mobile)
-        }else{
-          //console.log('phoneArr',phoneArr)
-          this.updateTableData(data[i],'update')
-          this.$message.warning(`用户信息重复，请确认`)
-          return false
-        }
-      }
-      return true
-    },
-    async handleApprove(){
-      if(this.pageLoading) return
-      //检查数据
-      if(!this.checkTableData(this.tableData)) return 
-      //提交tableData中 isApply为false的
-      const data = this.tableData.filter((item)=>{return !item.isApply})
-      this.tableData = this.tableData.filter((item)=>{return item.isApply})
-      data.forEach(item=>{
-        delete item.isApply
-        delete item.isPass
-        delete item.isChecked
-      })
-      //说明该页数据全部已提交 直接跳转审批列表
-      if(!data.length){
-        this.$message.success('提交成功')
-        this.$router.push('/etaApprovalList')
-        return
-      }
-      //提交申请 data
-      this.pageLoading = true
-      const res = await etaTrialInterence.addApproval({List:data})
-      this.pageLoading = false
-      if(res.Ret!==200){
-        !this.tableData.length&&this.addTableData()
-        return
-      }
-      const {BannedList,//禁用的列表
-             RepeatList,//重复的列表
-             SuccessList,//成功返回的列表
-             InternalList,//除ETA试用平台其他部门重复的列表
-            } = res.Data
-      //如果这次提交的data全部通过,则跳转回审批列表
-      if(SuccessList&&SuccessList.length===data.length){
-        this.$message.success('提交成功')
-        this.$router.push('/etaApprovalList')
-      }
-      //如果没有全部通过 通过的设置isApply为true 没通过的执行checkApproveData
-      else{
-        const successList = SuccessList?SuccessList.map(item=>{
-          item.isApply = true
-          item.isPass = true
-          return item
-        }):[]
-        const bannedList = BannedList?BannedList.map(item=>{
-          item.isApply = false
-          item.isPass = false
-          return item
-        }):[]
-        const repeatList = RepeatList?RepeatList.map(item=>{
-          item.isApply = false
-          item.isPass = false
-          return item
-        }):[]
-        const internalList = InternalList?InternalList.map(item=>{
-          item.isApply = false
-          item.isPass = false 
-          return item
-        }):[]
-        this.tableData = this.tableData.concat(successList,bannedList,repeatList,internalList)
-        !this.tableData.length&&this.addTableData()
-        this.checkApproveData(bannedList,repeatList,internalList)
-      }
-    },
-    checkApproveData(BannedList=[],RepeatList=[],InternalList=[]){
-      if(BannedList.length){
-        this.applyInfo.applyType = 0
-        this.applyInfo.applyData = BannedList
-        this.repeatList = RepeatList
-        this.internalList = InternalList
-      }else if(RepeatList.length){
-        //展示全部信息
-        this.applyInfo.applyType = 1
-        this.applyInfo.applyData = RepeatList
-        this.internalList = InternalList
-      }
-      if(!BannedList.length&&!RepeatList.length){
-        if(InternalList.length){
-          //展示轻提示
-          this.$message.error('用户信息重复，请联系管理员或技术部门')
-        }
-        return 
-      }
-      this.$nextTick(()=>{
-        this.isAddApplyHintShow = true
-      })
-    },
-    updateTableData(data,type='remove'){
-      //console.log('update',data)
-      //手机号作为标识
-      const index = this.tableData.findLastIndex((item)=>{return item.Mobile===data.Mobile})
-      const tableItem = this.tableData[index]
-      if(type==='remove'){
-        /* tableItem.isApply = true
-        tableItem.isPass = true
-        this.tableData.splice(index,1,tableItem) */
-        this.tableData.splice(index,1)
-        //如果删掉的是最后一个
-        if(!this.tableData.length){
-          this.addTableData()
-        }
-      }else{
-        tableItem.isChecked=false
-        this.tableData.splice(index,1,tableItem)
-      }      
-    },
-    cancelApprove(){
-      //返回ETA试用列表
-      this.$router.push('/etaTrialList')
-    },
-    closeDialog(){
-      this.isAddApplyHintShow = false
+import { etaTrialInterence } from '@/api/modules/crmApi.js';
+const router=useRouter()
+// 响应式数据
+const tableData = ref([{ isApply: false }]);
+const isAddApplyHintShow = ref(false);
+const applyInfo = reactive({});
+const repeatList = reactive([]);
+const pageLoading = ref(false);
+const internalList = reactive([]);
+const tableColumn = ref([
+  {
+    title:'姓名',
+    colKey:'UserName',
+    align: 'center'
+  },{
+    title:'公司名称',
+    colKey:'CompanyName',
+    align: 'center'
+  },{
+    title:'职位',
+    colKey:'Position',
+    align: 'center'
+  },{
+    title:'手机号码',
+    colKey:'Mobile',
+    align: 'center'
+  },{
+    title:'操作',
+    colKey:'opt',
+    align: 'center'
+  }
+]);
+
+// 方法
+function addTableData() {
+  tableData.value.push({ isApply: false });
+}
+
+function deleteTableData(index) {
+  tableData.value.splice(index, 1);
+}
+
+function tableRowClassName({ row }) {
+  if (row.isApply === false && row.isPass === false) {
+    return 'warning-row';
+  }
+  if (row.isApply === false && row.isChecked === false) {
+    return 'warning-row';
+  }
+  return '';
+}
+
+function checkTableData(data) {
+  console.log(data);
+  
+  let phoneArr = [];
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
+    if (item.isApply) continue;
+    if ((!item.UserName || !item.UserName.length) && item.UserName !== '') {
+      MessagePlugin.warning(`请输入第${i + 1}条数据的姓名`);
+      return false;
+    }
+    if ((!item.CompanyName || !item.CompanyName.length) && item.CompanyName !== '') {
+      MessagePlugin.warning(`请输入第${i + 1}条数据的公司名称`);
+      return false;
+    }
+    if ((!item.Position || !item.Position.length) && item.Position !== '') {
+      MessagePlugin.warning(`请输入第${i + 1}条数据的职位`);
+      return false;
+    }
+    if ((!item.Mobile || !item.Mobile.length) && item.Mobile !== '') {
+      MessagePlugin.warning(`请输入第${i + 1}条数据的电话号码`);
+      return false;
     }
-  },
-  mounted(){
-    if(sessionStorage.getItem('applyInfo')){
-      const applyInfo = JSON.parse(sessionStorage.getItem('applyInfo'))
-      sessionStorage.removeItem('applyInfo')
-      const data = applyInfo.applyData[0]
-      data.isApply = false
-      //this.tableData.unshift(data)
-      this.tableData=[data]
+    if (phoneArr.indexOf(data[i].Mobile) === -1) {
+      phoneArr.push(data[i].Mobile);
+    } else {
+      updateTableData(data[i], 'update');
+      MessagePlugin.warning(`用户信息重复，请确认`);
+      return false;
     }
   }
-};
+  return true;
+}
+
+async function handleApprove() {
+  if (pageLoading.value) return;
+  if (!checkTableData(tableData.value)) return;
+  const data = tableData.value.filter(item => !item.isApply);
+  tableData.value = tableData.value.filter(item => item.isApply);
+  data.forEach(item => {
+    delete item.isApply;
+    delete item.isPass;
+    delete item.isChecked;
+  });
+  if (!data.length) {
+    MessagePlugin.success('提交成功');
+    router.push('/etaTrial/etaApprovalList');
+    return;
+  }
+  pageLoading.value = true;
+  const res = await etaTrialInterence.addApproval({ List: data });
+  pageLoading.value = false;
+  if (res.Ret !== 200) {
+    !tableData.value.length && addTableData();
+    return;
+  }
+  const { BannedList, RepeatList, SuccessList, InternalList } = res.Data;
+  if (SuccessList && SuccessList.length === data.length) {
+    MessagePlugin.success('提交成功');
+    router.push('/etaTrial/etaApprovalList');
+  } else {
+    const successList = SuccessList ? SuccessList.map(item => ({ ...item, isApply: true, isPass: true })) : [];
+    const bannedList = BannedList ? BannedList.map(item => ({ ...item, isApply: false, isPass: false })) : [];
+    const repeatList = RepeatList ? RepeatList.map(item => ({ ...item, isApply: false, isPass: false })) : [];
+    const internalList = InternalList ? InternalList.map(item => ({ ...item, isApply: false, isPass: false })) : [];
+    tableData.value = [...tableData.value, ...successList, ...bannedList, ...repeatList, ...internalList];
+    !tableData.value.length && addTableData();
+    checkApproveData(bannedList, repeatList, internalList);
+  }
+}
+
+function checkApproveData(BannedList = [], RepeatList = [], InternalList = []) {
+  if (BannedList.length) {
+    applyInfo.applyType = 0;
+    applyInfo.applyData = BannedList;
+    repeatList.value = RepeatList;
+    internalList.value = InternalList;
+  } else if (RepeatList.length) {
+    applyInfo.applyType = 1;
+    applyInfo.applyData = RepeatList;
+    internalList.value = InternalList;
+  }
+  if (!BannedList.length && !RepeatList.length) {
+    if (InternalList.length) {
+      MessagePlugin.error('用户信息重复，请联系管理员或技术部门');
+    }
+    return;
+  }
+  isAddApplyHintShow.value = true;
+}
+
+function updateTableData(data, type = 'remove') {
+  const index = tableData.value.findIndex(item => item.Mobile === data.Mobile);
+  const tableItem = tableData.value[index];
+  if (type === 'remove') {
+    tableData.value.splice(index, 1);
+    if (!tableData.value.length) {
+      addTableData();
+    }
+  } else {
+    tableItem.isChecked = false;
+    tableData.value.splice(index, 1, tableItem);
+  }
+}
+
+function cancelApprove() {
+  router.push('/etaTrial/etaTrialList');
+}
+
+function closeDialog() {
+  isAddApplyHintShow.value = false;
+}
+
+// 生命周期钩子
+onMounted(() => {
+  if (sessionStorage.getItem('applyInfo')) {
+    const applyInfo = JSON.parse(sessionStorage.getItem('applyInfo'));
+    sessionStorage.removeItem('applyInfo');
+    const data = applyInfo.applyData[0];
+    data.isApply = false;
+    tableData.value = [data];
+  }
+});
 </script>
 
 <style lang="scss">
@@ -269,8 +254,10 @@ export default {
     color: red;
   }
   .btn-wrap{
-    margin-top:120px;
-    text-align: center;
+    padding:50px 50px 20px 0;
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
   }
 }
 </style>

src/views/etaTrial/compontents/addApplyHintDialog.vue

@@ -1,28 +1,20 @@
 <template>
 <!-- 新增申请 提示弹窗 弹窗 -->
   <div class="add-apply-hint-dialog">
-    <el-dialog
+    <t-dialog
       v-if="isAddApplyHintShow"
       :visible.sync="isAddApplyHintShow"
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
       header="提示"
       @close="handleApprove(false)"
       width="889px"
-      v-dialogDrag
       center
+      :footer="false"
     >
       <div class="dialog-container">
         <p class="hint">{{hintText}}</p>
         <div class="table-wrap">
-          <el-table :data="tableData" border v-loading="tableLoading">
-            <el-table-column v-for="column in columnList" :key="column.label"
-              align="center"
-              :prop="column.key"
-              :label="column.label"
-              :min-width="column.minWidth"
-            />
-          </el-table>
+          <t-table :data="tableData" :columns="columnList" :bordered="true" :table-layout="'auto'" rowKey="index" v-loading="tableLoading" >
+          </t-table>
         </div>
         <div class="apply-reason" v-if="applyInfo.applyType===0">
           <p>申请理由</p>
@@ -35,124 +27,114 @@
       </div>
       <div class="foot-container">
         <template v-if="applyInfo.applyType===0">
-          <el-button type="primary" @click="handleApprove">申请启用</el-button>
-          <el-button @click="handleApprove(false)">取 消</el-button>
+          <t-button theme="primary" @click="handleApprove">申请启用</t-button>
+          <t-button theme="default" @click="handleApprove(false)">取 消</t-button>
         </template>
         <template v-else>
-          <el-button type="primary" @click="closeDialog">知道了</el-button>
+          <t-button theme="primary" @click="closeDialog">知道了</t-button>
         </template>
       </div>
-    </el-dialog>
+    </t-dialog>
   </div>
 </template>
 
-<script>
-import{etaTrialInterence}from '@/api/modules/crmApi.js';
-import {applyApprovalList,textMap} from "../config"
-export default {
-  props:{
-    isAddApplyHintShow:{//弹窗显示
-      type:Boolean,
-      default:false
-    },
-    applyInfo:{//申请信息 
-      type:Object,
-      default:()=>{
-        return {
-          applyType:1,//0 账号禁用 1 信息重复
-          applyData:[]
-        }
-      }
-    }
-  },
-  computed:{
-  },
-  watch:{
-    isAddApplyHintShow(val){
-      if(val){
-        this.getTableData()
-        this.hintText = textMap[this.applyInfo.applyType]
-      }
-    }
-  },
-  data() {
-    return {
-      tableData:[],
-      applyData:[],
-      dataIndex:0,
-      columnList:applyApprovalList,
-      applyReason:'',
-      tableLoading:false,
-      hintText:'',
-    };
-  },
-  methods: {
-    closeDialog(){
-      //清空数据什么的
-      this.applyReason=''
-      this.tableData=[]
-      this.applyData=[]
-      this.dataIndex=0
-      this.$emit("closeDialog");
-      if(this.applyInfo.applyType===0){
-        this.$emit('overBannedList')
-        return
-      }
-      if(this.applyInfo.applyType===1){
-        this.$emit('overRepeatList')
-        return
-      }
-      
-    },
-    getTableData(){
-      //console.log('getTableData:applyType',this.applyInfo.applyType)
-      this.tableLoading = true
-      //如果是申请启用,则只展示一条数据
-      if(this.applyInfo.applyType===0){
-        this.applyData = this.applyInfo.applyData
-        this.tableData = [this.applyData[0]]
-        this.dataIndex = 0
-      }
-      //如果是申请信息重复,则展示全部数据
-      else{
-        this.tableData = this.applyInfo.applyData
-        this.dataIndex = 0
-      }
-      this.$nextTick(()=>{
-        this.tableLoading=false
-      })
-    },
-    async handleApprove(getNext=true){
-      if(getNext){
-        // if(!this.applyReason.length){
-        //   this.$message.warning('请输入申请理由')
-        //   return
-        // }
-        const {UserName,CompanyName,Position,Mobile} = this.applyData[this.dataIndex]
-        //调用申请接口
-        const res = await etaTrialInterence.applyEnable({
-          UserName,CompanyName,Position,Mobile,
-          ApplyReasons:this.applyReason
-        })
-        if(res.Ret!==200) return 
-        this.$message.success('提交成功')
-        //申请成功 在父页面将该记录删除
-        this.$emit('applyActiveSuccess',this.applyData[this.dataIndex]) 
-      }
-      this.applyReason=''
-      this.getNextTableData()
-    },
-    getNextTableData(){
-      this.dataIndex++
-      const length = this.applyData.length
-      if(length-1>=this.dataIndex){
-        this.tableData = [this.applyData[this.dataIndex]]
-      }else{
-        this.closeDialog()
-      }
-    }
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { etaTrialInterence } from '@/api/modules/crmApi.js';
+import { applyApprovalList, textMap } from '../config';
+// emit
+const emit = defineEmits(['closeDialog', 'overBannedList', 'overRepeatList', 'applyActiveSuccess']);
+// props
+const props = defineProps({
+  isAddApplyHintShow: {
+    type: Boolean,
+    default: false
   },
-};
+  applyInfo: {
+    type: Object,
+    default: () => ({
+      applyType: 1, // 0 账号禁用 1 信息重复
+      applyData: []
+    })
+  }
+});
+
+// reactive data
+const tableData = ref([]);
+const applyData = ref([]);
+const dataIndex = ref(0);
+const columnList = applyApprovalList;
+const applyReason = ref('');
+const tableLoading = ref(false);
+const hintText = ref('');
+
+// watch
+watch(() => props.isAddApplyHintShow, (val) => {
+  if (val) {
+    getTableData();
+    hintText.value = textMap[props.applyInfo.applyType];
+  }
+});
+
+// methods
+function closeDialog() {
+  applyReason.value = '';
+  tableData.value = [];
+  applyData.value = [];
+  dataIndex.value = 0;
+  emit('closeDialog');
+  if (props.applyInfo.applyType === 0) {
+    emit('overBannedList');
+    return;
+  }
+  if (props.applyInfo.applyType === 1) {
+    emit('overRepeatList');
+    return;
+  }
+}
+
+function getTableData() {
+  tableLoading.value = true;
+  if (props.applyInfo.applyType === 0) {
+    applyData.value = props.applyInfo.applyData;
+    tableData.value = [applyData.value[0]];
+    dataIndex.value = 0;
+  } else {
+    tableData.value = props.applyInfo.applyData;
+    dataIndex.value = 0;
+  }
+  nextTick(() => {
+    tableLoading.value = false;
+  });
+}
+
+async function handleApprove(getNext = true) {
+  if (getNext) {
+    const { UserName, CompanyName, Position, Mobile } = applyData.value[dataIndex.value];
+    const res = await etaTrialInterence.applyEnable({
+      UserName,
+      CompanyName,
+      Position,
+      Mobile,
+      ApplyReasons: applyReason.value
+    });
+    if (res.Ret !== 200) return;
+    MessagePlugin.success('提交成功');
+    emit('applyActiveSuccess', applyData.value[dataIndex.value]);
+  }
+  applyReason.value = '';
+  getNextTableData();
+}
+
+function getNextTableData() {
+  dataIndex.value++;
+  const length = applyData.value.length;
+  if (length - 1 >= dataIndex.value) {
+    tableData.value = [applyData.value[dataIndex.value]];
+  } else {
+    closeDialog();
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/views/etaTrial/compontents/applyApprovalDialog.vue

@@ -1,26 +1,18 @@
 <template>
 <!-- 申请账号审批/申请启用审批 弹窗 -->
   <div class="apply-approval-dialog">
-    <el-dialog
+    <t-dialog
       :visible.sync="isApplyApprovalDialogShow"
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
       :header="`申请${applyInfo.applyType===0?'启用':'账号'}审批`"
       @close="closeDialog"
       width="889px"
-      v-dialogDrag
       center
+      :footer="false"
     >
       <div class="dialog-container">
         <div class="table-wrap">
-          <el-table :data="tableData" border v-loading="tableLoading">
-            <el-table-column v-for="column in columnList" :key="column.label"
-              align="center"
-              :prop="column.key"
-              :label="column.label"
-              :min-width="column.minWidth"
-            />
-          </el-table>
+          <t-table :data="tableData" :columns="columnList" :bordered="true" :table-layout="'auto'" rowKey="EtaTrialId" v-loading="tableLoading">
+          </t-table>
         </div>
         <div class="apply-reason" v-if="applyInfo.applyType===0">
           <p>申请理由</p>
@@ -33,10 +25,10 @@
         <div class="apply-form">
           <div class="apply-status">
             <span>审批状态</span>
-             <el-radio-group v-model="applyStatus">
-              <el-radio :label="1">通过</el-radio>
-              <el-radio :label="2" class="color-hint">驳回</el-radio>
-            </el-radio-group>
+             <t-radio-group v-model="applyStatus">
+              <t-radio :value="1">通过</t-radio>
+              <t-radio :value="2" class="color-hint">驳回</t-radio>
+            </t-radio-group>
           </div>
           <div class="reject-reason" v-if="applyStatus===2">
             <span>驳回理由</span>
@@ -49,122 +41,85 @@
         </div>
       </div>
       <div class="foot-container">
-        <el-button type="primary" @click="handleApprove">确 定</el-button>
-        <el-button @click="closeDialog">取 消</el-button>
+        <t-button theme="primary" @click="handleApprove">确 定</t-button>
+        <t-button theme="default" @click="closeDialog">取 消</t-button>
       </div>
-    </el-dialog>
+    </t-dialog>
   </div>
 </template>
 
-<script>
-import {applyApprovalList} from "../config";
-import{etaTrialInterence}from '@/api/modules/crmApi.js';
-export default {
-  props:{
-    isApplyApprovalDialogShow:{//弹窗显示
-      type:Boolean,
-      default:false
-    },
-    applyInfo:{//申请信息 applyType 0 申请启用 1 申请账号
-      type:Object,
-      default:()=>{
-        return {
-          applyType:0,
-          applyData:[{ApplyReasons:''}]
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      applyStatus:1,//审批状态
-      rejectReason:'',//驳回理由
-      columnList:applyApprovalList,//表格列
-      tableLoading:false,
-      tableData:[]
-    };
-  },
-  watch:{
-    isApplyApprovalDialogShow(val){
-      if(val){
-        this.getTableData()
-      }
-    }
-  },
-  methods: {
-    async handleApprove(){
-      //提交这条审批
-      let res = null
-      if(this.applyStatus===1){
-        res = await etaTrialInterence.agreeApply({
-          ApprovalId:this.tableData[0].ApprovalId
-        })
-      }else{
-        if(!this.rejectReason.length){
-          this.$message.warning('请填写驳回理由')
-          return
-        }
-        res = await etaTrialInterence.rejectApply({
-          ApprovalId:this.tableData[0].ApprovalId,
-          RejectReason:this.rejectReason
-        })
-      }
-      if(res.Ret!==200) return 
-      this.$message.success(this.applyStatus===1?'通过成功':'驳回成功')
-      this.$emit('approved')
-      this.closeDialog()
-    },
-    closeDialog(){
-      //清空数据什么的
-      this.applyStatus=1
-      this.rejectReason=''
-      this.$emit("update:isApplyApprovalDialogShow", false);
-    },
-    getTableData(){
-      this.tableLoading = true
-      this.tableData = this.applyInfo.applyData
-      this.$nextTick(()=>{
-        this.tableLoading=false
-      })
-    },
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { applyApprovalList } from "../config";
+import { etaTrialInterence } from '@/api/modules/crmApi.js';
+
+// props
+const props = defineProps({
+  isApplyApprovalDialogShow: {
+    type: Boolean,
+    default: false
   },
-};
-</script>
-<style lang="scss">
-.apply-approval-dialog{
-  .apply-status{
-    .el-radio{
-      //更改单选框的样式
-    .el-radio__inner{
-      background: transparent;
-      &::after{
-        width:6px;
-        height:6px;
-        background-color: #409EFF;
-      }
-    }
-    }
+  applyInfo: {
+    type: Object,
+    default: () => ({
+      applyType: 0,
+      applyData: [{ ApplyReasons: '' }]
+    })
   }
-  .color-hint{
-    //更改驳回的样式
-    &.is-checked{
-      .el-radio__inner{
-        border-color: #C54322;
-        &::after{
-          background-color: #C54322;
-        }
-      }
-      .el-radio__input{
-        &.is-checked{//我真服了
-          +.el-radio__label{
-            color: #C54322;
-          }
-        }
-      }
+});
+
+// emit
+const emit = defineEmits(['approved', 'update:isApplyApprovalDialogShow']);
+
+const applyStatus = ref(1); // 审批状态
+const rejectReason = ref(''); // 驳回理由
+const columnList = applyApprovalList; // 表格列
+const tableLoading = ref(false);
+const tableData = ref([]);
+
+watch(() => props.isApplyApprovalDialogShow, (val) => {
+  if (val) {
+    getTableData();
+  }
+});
+
+async function handleApprove() {
+  let res = null;
+  if (applyStatus.value === 1) {
+    res = await etaTrialInterence.agreeApply({
+      ApprovalId: tableData.value[0].ApprovalId
+    });
+  } else {
+    if (!rejectReason.value.length) {
+      MessagePlugin.warning('请填写驳回理由');
+      return;
     }
+    res = await etaTrialInterence.rejectApply({
+      ApprovalId: tableData.value[0].ApprovalId,
+      RejectReason: rejectReason.value
+    });
   }
+  if (res.Ret !== 200) return;
+  MessagePlugin.success(applyStatus.value === 1 ? '通过成功' : '驳回成功');
+  emit('approved');
+  closeDialog();
 }
-</style>
+
+function closeDialog() {
+  applyStatus.value = 1;
+  rejectReason.value = '';
+  emit('update:isApplyApprovalDialogShow', false);
+}
+
+function getTableData() {
+  tableLoading.value = true;
+  tableData.value = props.applyInfo.applyData;
+  onMounted(() => {
+    tableLoading.value = false;
+  });
+}
+</script>
+
 <style scoped lang="scss">
 .apply-approval-dialog{
   .dialog-container{

src/views/etaTrial/compontents/move.vue

@@ -2,21 +2,18 @@
 <!-- 新增申请 提示弹窗 弹窗 -->
   <div class="move-dialog">
     <t-dialog
-      :visible.sync="isMoveShow"
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
+      :visible.sync="props.isMoveShow"
       :header="title"
       @close="handleMove(false)"
       width="530px"
       :footer="false"
-      v-dialogDrag
       center
     >
       <div class="dialog-container">
-        <t-form ref="form" :model="form" label-width="150px">
+        <t-form ref="form" label-width="150px">
           <t-form-item label="移动到">
             <t-cascader
-              v-model="value"
+              v-model="moveValue"
               placeholder="请选择用户"
               style="width:200px;margin-right:10px;margin-bottom:8px;"
               :options="salesArr"
@@ -25,8 +22,7 @@
               :key="modifySales"
               collapse-tags
               clearable
-              filterable
-              @change="changeSales">
+              filterable>
             </t-cascader>
           </t-form-item>
         </t-form>
@@ -39,68 +35,60 @@
   </div>
 </template>
 
-<script>
-import {titleMap} from "../config"
-export default {
-  props:{
-    isMoveShow:{//弹窗显示
-      type:Boolean,
-      default:false
-    },
-    moveInfo:{//申请信息 
-      type:Object,
-      default:()=>{
-        return {
-          type:1,//1 移动 2 批量移动
-          salesArr:[],//销售列表
-          selectArr:[]//申请列表
-        }
-      }
-    }
-  },
-  computed:{
-  },
-  watch:{
-    isMoveShow(val){
-      if(val){
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { titleMap } from '../config';
 
-        this.modifySales++
-        this.title = titleMap[this.moveInfo.type]
-        this.salesArr = this.moveInfo.salesArr
-        this.value = ''
-        this.$nextTick(() => {
-          this.$refs.form.clearValidate();
-          this.$refs.form.resetFields();
-        })
-      }
-    }
-  },
-  data() {
-    return {
-      title:'',
-      value:'',
-      defaultSalesProps:{
-				label:'RealName',
-				children:'ChildrenList',
-				value:'AdminId'
-			},//级联配置
-      modifySales:0,//用于重新渲染选择销售级联选择窗
-    };
+const emit = defineEmits(['moveConfirm', 'closeMove']);
+
+const props = defineProps({
+  isMoveShow: {
+    type: Boolean,
+    default: false
   },
-  methods: {
-    handleMove(isConfirm) {
-      const data = {
-        value:this.value,
-        type: this.moveInfo.type,
-        selectArr:this.moveInfo.selectArr
-      }
-      if(isConfirm){
-        this.$emit('moveConfirm', data)
-      }else{
-        this.$emit('closeMove')
-      }
+  moveInfo: {
+    type: Object,
+    default: () => ({
+      type: 1, // 1 移动 2 批量移动
+      salesArr: [], // 销售列表
+      selectArr: [] // 申请列表
+    })
+  }
+});
+
+const title = ref('');
+const moveValue = ref('');
+const modifySales = ref(0); // 用于重新渲染选择销售级联选择窗
+const salesArr = ref([]); // 销售列表
+const defaultSalesProps = ref({
+  value: 'AdminId',
+  label: 'RealName',
+  children: 'ChildrenList'
+})
+
+
+watch(() => props.isMoveShow, (val) => {
+    if(val){
+      modifySales.value++
+      title.value = titleMap[props.moveInfo.type]
+      console.log('moveInfo', props.moveInfo);
+      
+      salesArr.value = props.moveInfo.salesArr
+      moveValue.value = ''
     }
-  },
+  });
+ // 定义方法
+const handleMove = (isConfirm) => {
+  const data = {
+    moveValue: moveValue.value,
+    type: props.moveInfo.type,
+    selectArr: props.moveInfo.selectArr
+  };
+  if (isConfirm) {
+    emit('moveConfirm', data);
+  } else {
+    emit('closeMove');
+  }
 };
 </script>
 
@@ -119,10 +107,11 @@ export default {
   .dialog-container{
     margin-top: 40px;
   }
-  .foot-container{
-    text-align: center;
-    padding-bottom: 40px;
-    margin-top: 60px;
-  }
+  .foot-container {
+        padding:20px 0;
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+    }
 }
 </style>

src/views/etaTrial/config.js

@@ -53,9 +53,6 @@ export const etaTrialColumn = [
     title:'感兴趣模块',
     minWidth:'140'
   },
-  {
-    align: 'center', colKey: 'opt', title: '操作'
-  }
 ]
 
 //管理员-审批列表 非管理员-我的审批
@@ -97,6 +94,10 @@ export const adminApprovalList=[
 
 //非管理员-账号列表
 export const approvedList=[
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+  },
   {
     colKey:'UserName',
     title:'姓名'

src/views/etaTrial/etaTrialList.vue

@@ -45,7 +45,7 @@
       </div>
       <div class="search-wrap">
         <template v-if="currentPath === '/etaTrial/etaApprovalList'">
-          <t-button @click="batchMove">批量移动</t-button>
+          <t-button @click="batchMove" style="margin-right: 10px;">批量移动</t-button>
           <t-button @click="batchOperate">一键启用</t-button>
         </template>
         <t-input
@@ -59,11 +59,8 @@
       </div>
     </div>
     <div class="table-wrap">
-      <t-table :data="tableData" @sort-change="sortChangeHandle" :columns="columnList" ref="dataRef" :bordered="true" :table-layout="'auto'" rowKey="EtaTrialId" v-loading="tableLoading" @select="selectHandles" @select-all="selectAllHandle" @selection-change="selectionChange">
-        <!-- 多选 -->
-        <!-- <t-table-column align="center" type="selection" width="55" v-if="route.path === '/etaTrial/etaApprovalList'">
-        </t-table-column> -->
-       
+      <t-table :data="tableData" @sort-change="sortChangeHandle" :selected-row-keys="selectedRowKeys"
+      @select-change="selectionChange" :columns="columnList" ref="dataRef" :bordered="true" :table-layout="'auto'" rowKey="EtaTrialId" v-loading="tableLoading" @select="selectHandles" @select-all="selectAllHandle">
         <!-- <template #approveType="{ row }">
           <span >
             {{ row['approveType'] === 0 ? '申请账号' : '申请启用' }}
@@ -78,16 +75,16 @@
             <!-- 非管理员-账号列表的操作: 申请启用 -->
             <div>
               <t-button variant="text" theme="primary" @click="Move(row)">移动</t-button>
-              <span v-if="row.Enabled === 0" @click="handleOperate('active', row)">申请启用</span>
+              <t-button variant="text" theme="primary" v-if="row.Enabled === 0" @click="handleOperate('active', row)">申请启用</t-button>
             </div>
             <!-- 非管理员-我的审批操作: 撤回,重新申请,删除,驳回理由-->
             <div v-if="!Role.includes('admin') && listType === 'all'">
-              <span type="text" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 0" @click="handleOperate('withdraw', row)">撤回</span>
-              <span type="text" size="small" v-if="ApprovalStatus[row.ApprovalStatus] >= 2" @click="handleOperate('apply', row)">重新申请</span>
-              <span type="text" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 3" @click="handleOperate('checkReplay', row)">驳回理由</span>
-              <span type="text" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 2" class="color-hint" @click="handleOperate('delete', row)">删除</span>
+              <t-button variant="text" theme="primary" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 0" @click="handleOperate('withdraw', row)">撤回</t-button>
+              <t-button variant="text" theme="primary" size="small" v-if="ApprovalStatus[row.ApprovalStatus] >= 2" @click="handleOperate('apply', row)">重新申请</t-button>
+              <t-button variant="text" theme="primary" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 3" @click="handleOperate('checkReplay', row)">驳回理由</t-button>
+              <t-button variant="text" theme="primary" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 2" class="color-hint" @click="handleOperate('delete', row)">删除</t-button>
               <!-- 已审批通过的:查看密码 -->
-              <span type="text" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 1" @click="handleOperate('showDetail', row)">账号密码</span>
+              <t-button variant="text" theme="primary" size="small" v-if="ApprovalStatus[row.ApprovalStatus] === 1" @click="handleOperate('showDetail', row)">账号密码</t-button>
             </div>
         </template>
       </t-table>
@@ -102,18 +99,18 @@
       ></t-pagination>
     </div>
     <!-- 申请账号审批/申请启用审批 弹窗 -->
-    <!-- <apply-approval-dialog
+    <apply-approval-dialog
       :isApplyApprovalDialogShow.sync="isApplyApprovalDialogShow"
       :applyInfo="applyInfo"
       @approved="getTableData"
-    ></apply-approval-dialog> -->
+    ></apply-approval-dialog>
     <!-- 申请启用 弹窗 -->
-    <!-- <add-apply-hint-dialog
+    <add-apply-hint-dialog
       :isAddApplyHintShow.sync="isAddApplyHintShow"
       :applyInfo="applyInfo"
       @applyActiveSuccess="getTableData"
       @closeDialog="closeDialog"
-    ></add-apply-hint-dialog> -->
+    ></add-apply-hint-dialog>
     <!-- 移动弹窗 -->
     <move
       :isMoveShow.sync="isMoveShow"
@@ -151,6 +148,9 @@ import { etaTrialColumn, adminApprovalList, approvedList, ApprovalStatus } from
 import { etaTrialInterence } from '@/api/modules/crmApi.js';
 import { customInterence } from '@/api/api.js';
 import { useRoute, useRouter } from 'vue-router'
+import AddApplyHintDialog from './compontents/addApplyHintDialog.vue';
+import move from './compontents/move.vue';
+import applyApprovalDialog from './compontents/applyApprovalDialog.vue';
 const router=useRouter()
 const route=useRoute()
 // 响应式数据
@@ -195,6 +195,7 @@ const moveInfo = reactive({
   salesArr: [], // 销售列表
   selectArr: [], // 已选择的id
 });
+const selectedRowKeys = ref([1]);
 
 // 计算属性
 const Role = computed(() => localStorage.getItem('Role'));
@@ -303,11 +304,11 @@ const onlyMineChange = () => {
 const changePath = (path) => {
   if (currentPath.value === path) return;
   currentPath.value = path;
-  router.push(path); // 确保 router 已被正确导入
+  router.push(path); 
 };
 
 const toQuestionnaireSurvey = () => {
-  router.push('/questionnaireSurvey'); // 确保 router 已被正确导入
+  router.push('/questionnaireSurvey');
 };
 
 const handleCurrentChange = (pageNo) => {
@@ -319,7 +320,6 @@ const adjustSelection = () => {
   if (!isSelectAll.value) {
     tableData.value.forEach(it => {
       if (selectList.value.includes(it.EtaTrialId)) {
-        // 假设这里有一个方法 toggleRowSelection 来切换行的选中状态
         // toggleRowSelection(it, true);
       }
     });
@@ -335,10 +335,8 @@ const adjustSelection = () => {
 const listCheckAllChange = (value) => {
   selectList.value = [];
   isSelectAll.value = value;
-  // 假设这里有一个方法来清除所有行的选中状态
   // clearSelection();
   if (value) {
-    // 假设这里有一个方法来选中所有行
     // toggleAllSelection();
   }
 };
@@ -426,7 +424,7 @@ const handleOperate = async (type, data) => {
     const { ApplyMethod } = data;
     if (ApplyMethod === 1) {
       sessionStorage.setItem('applyInfo', JSON.stringify(applyInfo));
-      router.push('/etaTrial/etaAddApproval'); // 确保 router 已被正确导入
+      router.push('/etaTrial/etaAddApproval');
     } else {
       isAddApplyHintShow.value = true;
     }
@@ -444,7 +442,7 @@ const handleOperate = async (type, data) => {
       const { ApplyMethod } = data;
       if (ApplyMethod === 1) {
         sessionStorage.setItem('applyInfo', JSON.stringify(applyInfo));
-        router.push('/etaTrial/etaAddApproval'); // 确保 router 已被正确导入
+        router.push('/etaTrial/etaAddApproval');
       } else {
         isAddApplyHintShow.value = true;
       }
@@ -479,8 +477,8 @@ const closeDialog = () => {
 };
 
 const moveConfirm = (data) => {
-  const { type, value, selectArr } = data;
-  const currentSellerId = parseInt(value[value.length - 1]);
+  const { type, moveValue, selectArr } = data;
+  const currentSellerId = parseInt(moveValue);
   const params = {
     currentSellerId,
     EtaTrialIdList: selectArr,