feat: 统一input、select、picker等组件样式

2025-07-15 11:03:44 +08:00
parent cdb8f677bc
commit 97dd86cd45
20 changed files with 344 additions and 101 deletions
--- a/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
@ -1,18 +1,4 @@
 .container {
-  :deep(.arco-input-wrapper),
-  :deep(.arco-select-view-single),
-  :deep(.arco-select-view-multiple),
-  :deep(.arco-picker) {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
  .filter-row {
    .filter-row-item {
      &:not(:last-child) {
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
@ -63,8 +63,8 @@
        </div>
      </div>
    </div>
-    <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @update="emits('update')" />
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
+    <PauseAccountPatchModal ref="pauseAccountPatchModalRef" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
  </div>
 </template>

@ -92,7 +92,7 @@ const props = defineProps({
  },
 });

-const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
+const emits = defineEmits(['openEdit', 'selectionChange', 'delete']);

 const pauseAccountPatchModalRef = ref(null);
 const authorizedAccountModalRef = ref(null);
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
@ -20,8 +20,8 @@ import { ref } from 'vue';
 import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

-const emits = defineEmits(['update', 'close']);
-
+const emits = defineEmits(['close']);
+const update = inject('update');
 const visible = ref(false);
 const accountId = ref(null);
 const accountName = ref('');
@ -45,7 +45,7 @@ async function onConfirm() {
  const { code } = await pausePatchPlacementAccount(accountId.value);
  if (code === 200) {
    AMessage.success('暂停成功');
-    emits('update');
+    update();
    onClose();
  }
 }
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
@ -137,7 +137,7 @@
      </a-button>
    </template>

-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
    <!-- <ImportPromptModal ref="importPromptModalRef" /> -->
  </a-modal>
 </template>
@ -161,7 +161,7 @@ import {
 import icon1 from '@/assets/img/media-account/icon-download.png';
 import icon2 from '@/assets/img/media-account/icon-delete.png';

-const emits = defineEmits(['update']);
+const update = inject('update');

 const UploadStatus = {
  DEFAULT: 'default',
@ -278,7 +278,7 @@ const handleBatchImport = async () => {
    });
    if (code === 200) {
      AMessage.success('导入成功');
-      emits('update');
+      update();
      onClose();
    } else {
      uploadStatus.value = UploadStatus.ERROR;
@ -303,7 +303,7 @@ async function onSubmit() {
      const { code, data } = await _fn(_params);
      if (code === 200) {
        isEdit.value && AMessage.success('修改成功');
-        emits('update');
+        update();

        if (isEdit.value) {
          onClose();
--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
@ -59,6 +59,8 @@
      <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
    </template>
  </a-modal>
+
+  <SelectSubAccountModal ref="selectSubAccountModalRef" />
 </template>

 <script setup>
@ -71,11 +73,13 @@ import {
  postPlacementAccountsSync,
 } from '@/api/all/propertyMarketing';

+import SelectSubAccountModal from '../select-sub-account-modal';
+
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';

-const emits = defineEmits(['update']);
+const update = inject('update');
 const INITIAL_SYNC_TYPE = 'sync';
 const visible = ref(false);
 const isLoading = ref(false);
@ -86,6 +90,7 @@ const failReason = ref('');
 const progress = ref(0);
 const id = ref('');

+const selectSubAccountModalRef = ref(null);
 const lastSyncedAt = ref(null); // 上次同步时间戳
 const showSyncTip = ref(false);
 const syncType = ref(INITIAL_SYNC_TYPE); // sync ｜ no_sync
@ -242,6 +247,10 @@ const handleSyncData = () => {
 };

 const handleOk = () => {
+  close();
+  selectSubAccountModalRef.value.open();
+  return;
+  // n天未同步更新
  if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
    handleSyncData();
    return;
@ -249,7 +258,7 @@ const handleOk = () => {

  if (isCompleted.value) {
    if (isSuccess.value) {
-      emits('update');
+      update();
      close();
    } else {
      startLoading();
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
@ -1,17 +1,4 @@
 .container {
-  :deep(.arco-input-wrapper),
-  :deep(.arco-select-view-single),
-  :deep(.arco-select-view-multiple) {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
  .filter-row {
    .filter-row-item {
      &:not(:last-child) {
--- a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts
@ -0,0 +1,20 @@
+export const INITIAL_FORM = {
+  search: '',
+  id: '',
+};
+export const INITIAL_PAGE_INFO = {
+  page: 1,
+  pageSize: 20,
+  total: 0,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '账户名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '账户ID',
+    dataIndex: 'id',
+  },
+];
--- a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
@ -0,0 +1,198 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="选择子账户"
+    modal-class="select-sub-account-modal"
+    width="720px"
+    :mask-closable="false"
+    @close="onClose"
+  >
+    <div class="filter-row flex mb-16px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">账户名称</span>
+        <a-input
+          v-model="query.search"
+          class="w-240px"
+          placeholder="请搜索..."
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">账户ID</span>
+        <a-input
+          v-model="query.id"
+          class="w-240px"
+          placeholder="请搜索..."
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+      </div>
+    </div>
+
+    <a-table
+      ref="tableRef"
+      :data="dataSource"
+      column-resizable
+      row-key="id"
+      :row-selection="{
+        type: 'checkbox',
+        showCheckedAll: true,
+        width: 48,
+      }"
+      :selected-keys="selectedItems"
+      :pagination="false"
+      :scroll="{ x: '100%' }"
+      class="w-100% flex-1"
+      bordered
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+    >
+      <template #empty>
+        <NoData />
+      </template>
+      <template #columns>
+        <a-table-column
+          v-for="column in TABLE_COLUMNS"
+          :key="column.dataIndex"
+          :data-index="column.dataIndex"
+          :fixed="column.fixed"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :sortable="column.sortable"
+          :align="column.align"
+          ellipsis
+          tooltip
+        >
+          <template #title>
+            <div class="flex items-center">
+              <img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
+              <span class="cts mr-4px">{{ column.title }}</span>
+              <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+              </a-tooltip>
+            </div>
+          </template>
+
+          <template v-if="column.dataIndex === 'platform'" #cell="{ record }">
+            {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
+          </template>
+          <template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
+            {{ exactFormatTime(record.time) }}
+          </template>
+
+          <template v-else #cell="{ record }">
+            {{ formatTableField(column, record, true) }}
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+    <div v-if="pageInfo.total > 0" class="flex justify-end">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.pageSize"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+    <template #footer>
+      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete">添加已选账户</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
+import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
+
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+
+const update = inject('update');
+
+const visible = ref(false);
+const dataSource = ref([]);
+const query = ref(cloneDeep(INITIAL_FORM));
+const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
+const selectedItems = ref([]);
+const deleteTaskModalRef = ref(null);
+
+const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
+const indeterminate = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
+);
+
+const open = () => {
+  getData();
+
+  visible.value = true;
+};
+const onClose = () => {
+  query.value = cloneDeep(INITIAL_FORM);
+  pageInfo.value = cloneDeep(INITIAL_FORM);
+
+  visible.value = false;
+};
+
+const getData = () => {
+  dataSource.value = [
+    {
+      id: 1832880547948105,
+      name: '美团-人设组YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题-3',
+    },
+    {
+      id: 1832880548441993,
+      name: 'YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题',
+    },
+  ];
+};
+const reload = () => {
+  pageInfo.value.page = 1;
+  getData();
+};
+
+const handleSearch = () => {
+  reload();
+};
+const handleSelect = (selectedRowKeys, selectedRows) => {
+  selectedItems.value = selectedRowKeys;
+};
+
+const handleSelectAll = (checked) => {
+  if (checked) {
+    selectedItems.value = dataSource.value.map((item) => item.id);
+  } else {
+    selectedItems.value = [];
+  }
+};
+
+const onPageChange = (current) => {
+  pageInfo.value.page = current;
+  getData();
+};
+const onPageSizeChange = (pageSize) => {
+  pageInfo.value.pageSize = pageSize;
+  reload();
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
--- a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss
@ -0,0 +1,35 @@
+.select-sub-account-modal {
+  .arco-modal-header {
+  }
+  .arco-modal-body {
+    height: 536px;
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+        .label {
+          margin-right: 12px;
+          color: #211f24;
+          font-family: 'PuHuiTi-Regular';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+        :deep(.arco-space-item) {
+          width: 100%;
+        }
+      }
+    }
+    .cts {
+      color: var(--Text-1, #211f24);
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@ -67,7 +67,6 @@
        @selectionChange="handleSelectionChange"
        @delete="handleDelete"
        @openEdit="handleOpenEdit"
-        @update="getData"
      />
      <NoData v-else />

@ -86,7 +85,7 @@
      </div>
    </div>

-    <AddAccountModal ref="addAccountModalRef" @update="getData" />
+    <AddAccountModal ref="addAccountModalRef" />
    <DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
  </div>
 </template>
@ -254,6 +253,8 @@ const handleOpenAbnormalAccount = () => {
  query.value.status = 2;
  reload();
 };
+
+provide('update', getData);
 </script>

 <style scoped lang="scss">