增加店铺重新授权的功能

.env.development

@@ -2,9 +2,9 @@
 ENV='development'
 
 # 本地环境接口地址
- VITE_API_URL = 'http://127.0.0.1:8000'
+# VITE_API_URL = 'http://127.0.0.1:8000'
 # VITE_API_URL='http://192.168.1.225:82/'
-# VITE_API_URL='http://operate.zosi.com.cn/'
+ VITE_API_URL='http://operate.zosi.com.cn/'
 # VITE_API_URL="http://192.168.1.231:82/"
 
 # 是否启用按钮权限

src/views/store-manage/Columns.ts

@@ -33,7 +33,7 @@ export const MarketStoreColumns = [
     slots: { default: 'create_datetime' }
   },
   {
-    field: 'operate', title: '操 作', width: 70, align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', width: 110, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];

src/views/store-manage/market-store/component/DataTable.vue

@@ -69,7 +69,7 @@ const gridOptions: any = reactive({
 });
 
 onBeforeMount(() => {
-  gridOptions.pagerConfig.limit = 20;
+  gridOptions.pagerConfig.limit = 100;
 })
 
 onMounted(() => {
@@ -103,7 +103,22 @@ function handleRefresh() {
 defineExpose({ fetchList });
 
 const authorizeDialogVisible = ref(false);
-function handleAddStore(){
+const authorizePrefill = ref<{ accountName: string; platformCode: string; countryCode: string } | null>(null);
+const isReauthorize = ref(false);
+
+function handleAddStore() {
+	authorizePrefill.value = null;
+	isReauthorize.value = false;
+	authorizeDialogVisible.value = true;
+}
+
+function handleReauthorize(row: any) {
+	authorizePrefill.value = {
+		accountName: row.name ?? '',
+		platformCode: row.platform_number ?? '',
+		countryCode: row.country_code ?? '',
+	};
+	isReauthorize.value = true;
 	authorizeDialogVisible.value = true;
 }
 
@@ -145,11 +160,11 @@ function handleEdit(row: any) {
     </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in MarketStoreColumns" #[`${col.field}`]="{ row }">
-      <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit"/>
+      <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @reauthorize="handleReauthorize"/>
     </template>
   </vxe-grid>
 	<EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
-	<StoreAuthorization v-model="authorizeDialogVisible"/>
+	<StoreAuthorization v-model="authorizeDialogVisible" :prefill-data="authorizePrefill" :reauthorize="isReauthorize"/>
 </template>
 
 <style scoped>

src/views/store-manage/market-store/component/DataTableSlot.vue

@@ -7,7 +7,7 @@
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
 import { getTagType } from '/@/utils/useTagColor';
-import { Operation } from '@element-plus/icons-vue';
+import { Operation, Key } from '@element-plus/icons-vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 
 
@@ -21,13 +21,24 @@ const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
 const color = country ? country.color : '#3875F6';
 const region = countryInfoStore.Region.find(r => r.code == row.region);
-const status =  row.status === "open" ? "正常" : "关闭";
 
-const emit = defineEmits([ 'edit-row']);
+type StatusTagType = '' | 'success' | 'info' | 'warning' | 'danger';
+const statusMap: Record<string, { text: string; type: StatusTagType }> = {
+	open: { text: '正常', type: '' },
+	closed: { text: '关闭', type: 'danger' },
+	Unauthorized: { text: '授权失效', type: 'warning' },
+};
+const statusInfo = statusMap[row.status] ?? { text: row.status ?? '-', type: '' as StatusTagType };
+
+const emit = defineEmits(['edit-row', 'reauthorize']);
 
 function handleEdit() {
 	emit('edit-row', row);
 }
+
+function handleReauthorize() {
+	emit('reauthorize', row);
+}
 </script>
 
 <template>
@@ -43,15 +54,12 @@ function handleEdit() {
       </el-tag>
     </div>
 		<div v-else-if="field === 'status'">
-			<el-tag v-if="row.status === 'open'" :disable-transitions="true"  effect="plain" round>
-				{{status }}
-			</el-tag>
-			<el-tag v-else :disable-transitions="true" type="danger" effect="plain" round>
-				{{status }}
+			<el-tag :disable-transitions="true" :type="statusInfo.type" effect="plain" round>
+				{{ statusInfo.text }}
 			</el-tag>
 		</div>
-		<div v-else-if="field === 'operate'">
-			<el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
+		<div v-else-if="field === 'operate'" class="flex justify-center gap-2">
+			<el-tooltip :enterable="false" :show-arrow="false" content="编辑" hide-after="0"
 									placement="top" popper-class="custom-btn-tooltip">
 				<PermissionButton circle plain type="warning" @click="handleEdit">
 					<el-icon>
@@ -59,6 +67,14 @@ function handleEdit() {
 					</el-icon>
 				</PermissionButton>
 			</el-tooltip>
+			<el-tooltip v-if="row.status === 'Unauthorized'" :enterable="false" :show-arrow="false" content="重新授权" hide-after="0"
+									placement="top" popper-class="custom-btn-tooltip">
+				<PermissionButton circle plain type="primary" @click="handleReauthorize">
+					<el-icon>
+						<Key />
+					</el-icon>
+				</PermissionButton>
+			</el-tooltip>
 		</div>
     <!-- 动态获取 -->
     <div v-else>

src/views/store-manage/market-store/component/storeAuthorization.vue

@@ -5,15 +5,28 @@ import { genSpAuthLink } from '/@/views/store-manage/market-store/api';
 import { Check, CircleCheck, Key, Shop, Warning, Link } from '@element-plus/icons-vue';
 
 
+interface PrefillData {
+	accountName: string;
+	platformCode: string;
+	countryCode: string;
+}
+
+const props = defineProps<{
+	prefillData?: PrefillData | null;
+	reauthorize?: boolean;
+}>();
+
 const { toClipboard } = useClipboard();
 const authorizeDialogVisible = defineModel();
 
-const formData = ref({
+const defaultFormData = (): PrefillData => ({
 	countryCode: 'US',
 	accountName: '',
 	platformCode: '',
 });
 
+const formData = ref<PrefillData>(defaultFormData());
+
 const authType = ref('sp');
 const authLink = ref('');
 const isGenerating = ref(false);
@@ -71,7 +84,10 @@ const genAuthLink = async () => {
 		isGenerating.value = true;
 
 		if (authType.value === 'sp') {
-			const resp = await genSpAuthLink(formData.value);
+			const params = props.reauthorize
+				? { ...formData.value, reauthorize: true }
+				: { ...formData.value };
+			const resp = await genSpAuthLink(params);
 			authLink.value = resp.data;
 
 			ElMessage({
@@ -121,9 +137,21 @@ const resetForm = () => {
 	authLink.value = '';
 	isGenerating.value = false;
 	isCopying.value = false;
+	formData.value = defaultFormData();
 	formRef.value?.resetFields();
 };
 
+// 弹框打开时，如果有预填数据则自动填充
+watch(authorizeDialogVisible, (visible) => {
+	if (visible && props.prefillData) {
+		formData.value = {
+			accountName: props.prefillData.accountName,
+			platformCode: props.prefillData.platformCode,
+			countryCode: props.prefillData.countryCode || 'US',
+		};
+	}
+});
+
 // 表单是否有效
 const isFormValid = computed(() => {
 	return formData.value.accountName.trim() !== '' && formData.value.platformCode.trim() !== '' && formData.value.countryCode;