✨ feat<任务列表>: 添加字段

src/views/reportManage/TaskManage/index.vue

@@ -17,6 +17,7 @@ import {
 import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Delete, Plus } from '@element-plus/icons-vue';
 import { dateType, requiredFields } from '/@/views/reportManage/TaskManage/utils/enum';
+import { taskColumns } from '/@/views/reportManage/TaskManage/utils/columns';
 
 const selectorRef = ref(null);
 const message = ref('');
@@ -36,8 +37,16 @@ interface taskRuleForm {
   ipaddress: string;
   company: string;
   platform: string;
+  companyEnglishName: string;
+  address: string;
+  juridicalPerson: string;
+  juridicalPersonCreditCard: string;
+  juridicalPersonCreditCardAddress: string;
+  receivablesAccount: string;
+  receivablesAccountCompany: string;
+  vatNumber: string;
+  vatCompany: string;
 }
-
 const formSize = ref<ComponentSize>('default');
 const dialogFormVisible = ref(false);
 const taskRuleFormRef = ref<FormInstance>();
@@ -139,95 +148,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
     highlight: true,
     range: true,
   },
-  columns: [
-    { type: 'checkbox', width: 50 },
-    {
-      field: 'platformNumber',
-      title: '平台编号',
-      editRender: { autofocus: '.vxe-input--inner' },
-      slots: { edit: 'number_edit' },
-      minWidth: 97
-    },
-    {
-      field: 'platformName',
-      title: '平台名称',
-      editRender: { autofocus: '.vxe-input--inner' },
-      slots: { edit: 'name_edit' },
-      align: 'center',
-      minWidth: 150, isEditing: false
-    },
-    {
-      field: 'country',
-      title: '国家',
-      editRender: { autofocus: '.vxe-input--inner' },
-      slots: { edit: 'country_edit' },
-      minWidth: 89,
-      align: 'center'
-    },
-    {
-      field: 'brandName',
-      title: '品牌',
-      editRender: {},
-      slots: { edit: 'brand_edit' },
-      align: 'center',
-      minWidth: 89,
-    },
-    {
-      field: 'user_name',
-      title: '填写人',
-      editRender: {},
-      slots: {
-        edit: 'operation_edit',
-        //default: 'operation_default'
-      },
-      align: 'center',
-      minWidth: 104
-    },
-    {
-      field: 'operater',
-      title: '运营',
-      editRender: {},
-      slots: { edit: 'operater_name_edit' },
-      align: 'center',
-      minWidth: 104
-    },
-    {
-      field: 'currencyCode',
-      title: '平台币种',
-      editRender: {},
-      slots: { edit: 'currency_edit' },
-      align: 'center',
-      minWidth: 95
-    },
-    {
-      field: 'currencyCodePlatform',
-      title: '回款/余额币种',
-      editRender: {},
-      slots: { edit: 'currencyCodePlatform_edit' },
-      minWidth: 130,
-      align: 'center'
-    },
-    { field: 'line', title: '线路', editRender: {}, slots: { edit: 'line_edit' }, align: 'center', minWidth: 89 },
-    { field: 'ipaddress', title: 'IP地址', editRender: {}, slots: { edit: 'ipaddress_edit' }, minWidth: 138 },
-    {
-      field: 'company',
-      title: '注册公司',
-      editRender: {},
-      slots: { edit: 'company_edit' },
-      align: 'center',
-      minWidth: 89
-    },
-    {
-      field: 'platform',
-      title: '平台',
-      editRender: {},
-      slots: { edit: 'platform_edit' },
-      align: 'center',
-      minWidth: 89
-    },
-    { field: 'status', title: '状态', slots: { default: 'status_default' }, align: 'center', minWidth: 89 },
-    { title: '操作', width: 120, slots: { default: 'operate' } },
-  ],
+  columns: taskColumns,
   data: [],
 });
 
@@ -558,6 +479,15 @@ async function updateRow(row) {
       ipaddress: row.ipaddress,
       company: row.company,
       platform: row.platform,
+      companyEnglishName: row.companyEnglishName,
+      address: row.address,
+      juridicalPerson: row.juridicalPerson,
+      juridicalPersonCreditCard: row.juridicalPersonCreditCard,
+      juridicalPersonCreditCardAddress: row.juridicalPersonCreditCardAddress,
+      receivablesAccount: row.receivablesAccount,
+      receivablesAccountCompany: row.receivablesAccountCompany,
+      vatNumber: row.vatNumber,
+      vatCompany: row.vatCompany,
     };
     try {
       const response = await postUpdateTask(updatedRowData);
@@ -630,6 +560,15 @@ async function createTask() {
     ipaddress: taskRuleForm.ipaddress,
     company: taskRuleForm.company,
     platform: taskRuleForm.platform,
+    companyEnglishName: taskRuleForm.companyEnglishName,
+    address: taskRuleForm.address,
+    juridicalPerson: taskRuleForm.juridicalPerson,
+    juridicalPersonCreditCard: taskRuleForm.juridicalPersonCreditCard,
+    juridicalPersonCreditCardAddress: taskRuleForm.juridicalPersonCreditCardAddress,
+    receivablesAccount: taskRuleForm.receivablesAccount,
+    receivablesAccountCompany: taskRuleForm.receivablesAccountCompany,
+    vatNumber: taskRuleForm.vatNumber,
+    vatCompany: taskRuleForm.vatCompany,
     user: taskRuleForm.operation,
     operater: [taskRuleForm.operater],
   };
@@ -756,17 +695,70 @@ function handelRowCurrencyCodePlatformSelect(item, row) {
   row.currencyCodePlatform = item;
 }
 
+const formItems = ref([
+  { label: '平台编号', prop: 'number', type: 'input', placeholder: '请输入平台编号' },
+  { label: '平台名称', prop: 'name', type: 'input', placeholder: '请输入平台名称' },
+  { label: '国家', prop: 'country', type: 'input', placeholder: '请输入国家' },
+  { label: '品牌', prop: 'brand', type: 'input', placeholder: '请输入品牌' },
+  {
+    label: '录入人员',
+    prop: 'operation',
+    type: 'select',
+    placeholder: '请选择录入人员',
+    multiple: true,
+    collapseTags: true,
+    collapseTagsTooltip: true,
+    options: operationList
+  },
+  { label: '运营', prop: 'operater', type: 'input', placeholder: '请输入运营' },
+  {
+    label: '平台币种',
+    prop: 'currency',
+    type: 'autocomplete',
+    placeholder: '请输入回款币种',
+    debounce: 100,
+    fetchSuggestions: querySearch,
+    triggerOnFocus: false,
+    clearable: true,
+    onSelect: handleSelect
+  },
+  {
+    label: '回款/余额币种',
+    prop: 'currencyCodePlatform',
+    type: 'autocomplete',
+    placeholder: '请输入回款/余额币种',
+    debounce: 100,
+    fetchSuggestions: querySearch,
+    triggerOnFocus: false,
+    clearable: true,
+    onSelect: handleCurrencyCodePlatformSelect
+  },
+  { label: '平台', prop: 'platform', type: 'input', placeholder: '请输入平台' },
+  { label: '线路', prop: 'line', type: 'input', placeholder: '请输入线路' },
+  { label: 'IP地址', prop: 'ipaddress', type: 'input', placeholder: '请输入IP地址' },
+  { label: '注册公司', prop: 'company', type: 'input', placeholder: '请输入注册公司' },
+  { label: '公司英文名称', prop: 'companyEnglishName', type: 'input', placeholder: '请输入公司英文名称' },
+  { label: '公司地址', prop: 'address', type: 'input', placeholder: '请输入公司地址' },
+  { label: '公司法人', prop: 'juridicalPerson', type: 'input', placeholder: '请输入公司法人' },
+  { label: '法人信用卡', prop: 'juridicalPersonCreditCard', type: 'input', placeholder: '请输入法人信用卡' },
+  { label: '信用卡地址', prop: 'juridicalPersonCreditCardAddress', type: 'input', placeholder: '请输入信用卡地址' },
+  { label: '收款账号', prop: 'receivablesAccount', type: 'input', placeholder: '请输入收款账号' },
+  { label: '收款账号公司', prop: 'receivablesAccountCompany', type: 'input', placeholder: '请输入收款账号公司' },
+  { label: 'VAT税号', prop: 'vatNumber', type: 'input', placeholder: '请输入VAT税号' },
+  { label: 'VAT税号公司名称', prop: 'vatCompany', type: 'input', placeholder: '请输入VAT税号公司名称' },
+]);
+
 // 表格样式
 const cellStyle = () => {
   return {
-    fontSize: '13px',
-    fontWeight: '500',
+    fontSize: '12px',
+    fontWeight: '600',
   };
 };
 
 const headerCellStyle = () => {
   return {
-    fontSize: '14px',
+    fontSize: '13px',
   };
 };
 
@@ -787,7 +779,7 @@ onMounted(() => {
       <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"
                 v-on="gridEvents" @edit-actived="handleEditActived" @edit-closed="handleEditClosed">
         <template #toolbar_buttons>
-          <el-button :icon="Plus"  type="primary" @click="dialogFormVisible = true"> 添加任务</el-button>
+          <el-button :icon="Plus" type="primary" @click="dialogFormVisible = true"> 添加任务</el-button>
           <!--<el-button plain type="success" @click="saveEvent">保存</el-button>-->
           <el-button :disabled="isDeleteDisabled" :icon="Delete" plain type="danger" @click="removeEvent">删除
           </el-button>
@@ -905,6 +897,33 @@ onMounted(() => {
             </template>
           </el-autocomplete>
         </template>
+        <template #companyEnglishName_edit="{ row }">
+          <vxe-input v-model="row.companyEnglishName"></vxe-input>
+        </template>
+        <template #address_edit="{ row }">
+          <vxe-input v-model="row.address"></vxe-input>
+        </template>
+        <template #juridicalPerson_edit="{ row }">
+          <vxe-input v-model="row.juridicalPerson"></vxe-input>
+        </template>
+        <template #juridicalPersonCreditCard_edit="{ row }">
+          <vxe-input v-model="row.juridicalPersonCreditCard"></vxe-input>
+        </template>
+        <template #juridicalPersonCreditCardAddress_edit="{ row }">
+          <vxe-input v-model="row.juridicalPersonCreditCardAddress"></vxe-input>
+        </template>
+        <template #receivablesAccount_edit="{ row }">
+          <vxe-input v-model="row.receivablesAccount"></vxe-input>
+        </template>
+        <template #receivablesAccountCompany_edit="{ row }">
+          <vxe-input v-model="row.receivablesAccountCompany"></vxe-input>
+        </template>
+        <template #vatNumber_edit="{ row }">
+          <vxe-input v-model="row.vatNumber"></vxe-input>
+        </template>
+        <template #vatCompany_edit="{ row }">
+          <vxe-input v-model="row.vatCompany"></vxe-input>
+          </template>/
       </vxe-grid>
     </el-card>
   </div>
@@ -919,69 +938,46 @@ onMounted(() => {
         label-width="auto"
         status-icon
         style="max-width: 600px">
-      <el-form-item label="平台编号" prop="number">
-        <el-input v-model="taskRuleForm.number" placeholder="请输入平台编号" />
-      </el-form-item>
-      <el-form-item label="平台名称" prop="name">
-        <el-input v-model="taskRuleForm.name" placeholder="请输入平台名称" />
-      </el-form-item>
-      <el-form-item label="国家" prop="country">
-        <el-input v-model="taskRuleForm.country" placeholder="请输入国家" />
-      </el-form-item>
-      <el-form-item label="品牌" prop="brand">
-        <el-input v-model="taskRuleForm.brand" placeholder="请输入品牌" />
-      </el-form-item>
-      <el-form-item label="录入人员" prop="operation">
-        <el-select v-model="taskRuleForm.operation" collapse-tags collapse-tags-tooltip multiple
-                   placeholder="请选择录入人员">
-          <el-option v-for="item in operationList" :key="item.value" :label="item.label"
-                     :value="item.value"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="运营" prop="operater">
-        <el-input v-model="taskRuleForm.operater" placeholder="请输入运营" />
-      </el-form-item>
-      <el-form-item label="平台币种" prop="currency">
-        <el-autocomplete
-            v-model="taskRuleForm.currency"
-            :debounce="100"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            clearable
-            placeholder="请输入回款币种"
-            @select="handleSelect"
-        >
-          <template v-slot="{ item }">
-            <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
-          </template>
-        </el-autocomplete>
-      </el-form-item>
-      <el-form-item label="回款/余额币种" prop="currencyCodePlatform">
-        <el-autocomplete
-            v-model="taskRuleForm.currencyCodePlatform"
-            :debounce="100"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            clearable
-            placeholder="请输入回款/余额币种"
-            @select="handleCurrencyCodePlatformSelect"
-        >
-          <template v-slot="{ item }">
-            <div>{{ item }}</div> <!-- 确保正确显示每个选项 -->
-          </template>
-        </el-autocomplete>
-      </el-form-item>
-      <el-form-item label="线路" prop="line">
-        <el-input v-model="taskRuleForm.line" placeholder="请输入线路" />
-      </el-form-item>
-      <el-form-item label="IP地址" prop="ipaddress">
-        <el-input v-model="taskRuleForm.ipaddress" placeholder="请输入IP地址" />
-      </el-form-item>
-      <el-form-item label="注册公司" prop="company">
-        <el-input v-model="taskRuleForm.company" placeholder="请输入注册公司" />
-      </el-form-item>
-      <el-form-item label="平台" prop="platform">
-        <el-input v-model="taskRuleForm.platform" placeholder="请输入平台" />
+      <el-form-item
+          v-for="(item, index) in formItems"
+          :key="index"
+          :label="item.label"
+          :prop="item.prop"
+      >
+        <template v-if="item.type === 'input'">
+          <el-input v-model="taskRuleForm[item.prop]" :placeholder="item.placeholder" />
+        </template>
+        <template v-else-if="item.type === 'select'">
+          <el-select
+              v-model="taskRuleForm[item.prop]"
+              :placeholder="item.placeholder"
+              :multiple="item.multiple"
+              :collapse-tags="item.collapseTags"
+              :collapse-tags-tooltip="item.collapseTagsTooltip"
+          >
+            <el-option
+                v-for="option in item.options"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+            ></el-option>
+          </el-select>
+        </template>
+        <template v-else-if="item.type === 'autocomplete'">
+          <el-autocomplete
+              v-model="taskRuleForm[item.prop]"
+              :debounce="item.debounce"
+              :fetch-suggestions="item.fetchSuggestions"
+              :trigger-on-focus="item.triggerOnFocus"
+              :clearable="item.clearable"
+              :placeholder="item.placeholder"
+              @select="item.onSelect"
+          >
+            <template v-slot="{ item }">
+              <div>{{ item }}</div>
+            </template>
+          </el-autocomplete>
+        </template>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -1027,4 +1023,9 @@ onMounted(() => {
   border: none;
   box-shadow: none;
 }
+:deep(.vxe-table--header .vxe-header--row th .vxe-cell,
+.vxe-table--body .vxe-body--row td .vxe-cell) {
+  padding-left: 5px !important;
+  padding-right: 0 !important;
+}
 </style>

src/views/reportManage/TaskManage/utils/columns.ts

@@ -0,0 +1,144 @@
+import { ref } from 'vue';
+
+export const taskColumns = ref([
+  { type: 'checkbox', width: 50 },
+  {
+    field: 'platformNumber',
+    title: '平台编号',
+    editRender: { autofocus: '.vxe-input--inner' },
+    slots: { edit: 'number_edit' },
+    minWidth: 87
+  },
+  {
+    field: 'platformName',
+    title: '平台名称',
+    editRender: { autofocus: '.vxe-input--inner' },
+    slots: { edit: 'name_edit' },
+    align: 'center',
+    minWidth: 138, isEditing: false
+  },
+  {
+    field: 'country',
+    title: '国家',
+    editRender: { autofocus: '.vxe-input--inner' },
+    slots: { edit: 'country_edit' },
+    minWidth: 85,
+    align: 'center'
+  },
+  {
+    field: 'brandName',
+    title: '品牌',
+    editRender: {},
+    slots: { edit: 'brand_edit' },
+    align: 'center',
+    minWidth: 89,
+  },
+  {
+    field: 'user_name',
+    title: '填写人',
+    editRender: {},
+    slots: {
+      edit: 'operation_edit',
+      //default: 'operation_default'
+    },
+    align: 'center',
+    minWidth: 104
+  },
+  {
+    field: 'operater',
+    title: '运营',
+    editRender: {},
+    slots: { edit: 'operater_name_edit' },
+    align: 'center',
+    minWidth: 104
+  },
+  {
+    field: 'currencyCode',
+    title: '平台币种',
+    editRender: {},
+    slots: { edit: 'currency_edit' },
+    align: 'center',
+    minWidth: 90
+  },
+  {
+    field: 'currencyCodePlatform',
+    title: '回款/余额币种',
+    editRender: {},
+    slots: { edit: 'currencyCodePlatform_edit' },
+    minWidth: 120,
+    align: 'center'
+  },
+  {
+    field: 'platform',
+    title: '平台',
+    editRender: {},
+    slots: { edit: 'platform_edit' },
+    align: 'center',
+    minWidth: 89
+  },
+  { field: 'line', title: '线路', editRender: {}, slots: { edit: 'line_edit' }, align: 'center', minWidth: 89 },
+  { field: 'ipaddress', title: 'IP地址', editRender: {}, slots: { edit: 'ipaddress_edit' }, minWidth: 135 },
+  {
+    field: 'company',
+    title: '注册公司',
+    editRender: {},
+    slots: { edit: 'company_edit' },
+    align: 'center',
+    minWidth: 98
+  },
+  {
+    field: 'companyEnglishName',
+    title: '公司英文名称',
+    editRender: {},
+    slots: { edit: 'companyEnglishName_edit' },
+    align: 'center',
+    minWidth: 110
+  },
+  { field: 'address', title: '公司地址',editRender: {}, slots: { edit: 'address_edit' }, align: 'center', minWidth: 95 },
+  {
+    field: 'juridicalPerson',
+    title: '公司法人',
+    editRender: {},
+    slots: { edit: 'juridicalPerson_edit' },
+    align: 'center',
+    minWidth: 95
+  },
+  {
+    field: 'juridicalPersonCreditCard',
+    title: '法人信用卡',
+    editRender: {},
+    slots: { edit: 'juridicalPersonCreditCard_edit' },
+    align: 'center',
+    minWidth: 105
+  },
+  {
+    field: 'juridicalPersonCreditCardAddress',
+    title: '信用卡地址',
+    editRender: {},
+    slots: { edit: 'juridicalPersonCreditCardAddress_edit' },
+    align: 'center',
+    minWidth: 105
+  },
+  {
+    field: 'receivablesAccount',
+    title: '收款账号',
+    editRender: {},
+    slots: { edit: 'receivablesAccount_edit' },
+    align: 'center',
+    minWidth: 95
+  },
+  {
+    field: 'receivablesAccountCompany',
+    title: '收款账号公司',
+    editRender: {},
+    slots: { edit: 'receivablesAccountCompany_edit' },
+    align: 'center',
+    minWidth: 115
+  },
+  { field: 'vatNumber', title: 'VAT税号', editRender: {},slots: { edit: 'vatNumber_edit' }, align: 'center', minWidth: 95 },
+  { field: 'vatCompany', title: 'VAT税号公司名称', editRender: {},slots: { edit: 'vatCompany_edit' }, align: 'center', minWidth: 135 },
+
+  { field: 'status', title: '状态', slots: { default: 'status_default' }, align: 'center', minWidth: 89 },
+  { title: '操作', minWidth: 108, slots: { default: 'operate' },fixed: 'right' },
+]);
+

src/views/reportManage/TaskManage/utils/enum.ts

@@ -2,7 +2,7 @@ export const dateType = [
   { value: 'day', label: '日', },
   { value: 'week', label: '周', },
   { value: 'month', label: '月', },
-]
+];
 
 export const requiredFields = [
   { field: 'platformNumber', title: '平台编号' },