feat: 新增style变量文件 TML-226厂商数据合作授权管理开发

src/api/manufacturer/index.ts

+import { tmallabHttp } from '/@/utils/http/axios';
+import { List, Supplier, ParamsList, ParamsAdd, BrandList } from '/@/types/manufacturer';
+
+type ResponseData<T> = {
+  code: number;
+  data: T;
+  message: string;
+  success: boolean;
+  time: string;
+  traceId: string;
+};
+
+export const getManufacturerListApi = (data: ParamsList) =>
+  tmallabHttp.post<ResponseData<List[]>>({
+    url: '/system/mfrCooperate/getList',
+    data,
+  });
+
+// 获取供货商名称列表
+export const getSupplierApi = () =>
+  tmallabHttp.post<ResponseData<Supplier[]>>({
+    url: '/system/supplier/getSupplierComboBox',
+  });
+
+// 新增厂商
+export const handleManufacturerAdd = (data: ParamsAdd) =>
+  tmallabHttp.post<ResponseData<null>>({
+    url: '/system/mfrCooperate/add',
+    data,
+  });
+
+// 合作品牌
+export const getBrandListApi = (data: { brand: string }) =>
+  tmallabHttp.post<ResponseData<BrandList[]>>({
+    url: '/system/supplierBrandQualification/getApproveList',
+    data,
+  });
+
+// 获取详情
+export const getManuFactureDetail = (data: { supplierCode: string }) =>
+  tmallabHttp.post<ResponseData<List>>({
+    url: '/system/mfrCooperate/getOne',
+    data,
+  });
+
+// 编辑
+export const handleEditApi = (data: ParamsAdd) =>
+  tmallabHttp.post<ResponseData<null>>({
+    url: '/system/mfrCooperate/edit',
+    data,
+  });

src/const/manufacturer/index.ts

+export const Status = {
+  0: '已中止',
+  1: '进行中'
+}
+
+export const DataContract = {
+  false: '不允许非厂商数据存在',
+  true: '允许非厂商数据存在'
+}

src/main.ts

@@ -4,6 +4,7 @@ import 'virtual:windi-components.css';
 import 'virtual:windi-utilities.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
+import './styles/index.css'
 import App from './App.vue';
 import { createApp } from 'vue';
 import { initAppConfigStore } from '/@/logics/initAppConfig';

src/router/routes/modules/manufacturer.ts

+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+
+const manufacturer: AppRouteModule = {
+  path: '/manufacturer',
+  name: 'manufacturer',
+  component: LAYOUT,
+  redirect: '/manufacturer/index',
+  meta: {
+    hideChildrenInMenu: true,
+    orderNo: 200,
+    icon: 'ion:grid-outline',
+    title: '厂商管理',
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'Index',
+      component: () => import('/@/views/manufacturer/index.vue'),
+      meta: {
+        title: '合作厂商列表',
+      },
+    },
+    {
+      path: 'operate',
+      name: 'operate',
+      component: () => import('/@/views/manufacturer/modules/operate.vue'),
+      meta: {
+        title: '新增厂商',
+        hideMenu:true
+      },
+    },
+    {
+      path: 'detail',
+      name: 'detail',
+      component: () => import('/@/views/manufacturer/modules/detail.vue'),
+      meta: {
+        title: '厂商详情',
+        hideMenu:true
+      },
+    },
+  ],
+};
+
+export default manufacturer;

src/styles/index.css

+
+:root {
+  --fy-bg-white: #fff;
+  --fy-border-bottom-bg: #cdcdcd
+}

src/types/manufacturer/index.ts

+export type List = {
+  brandList: string[];
+  cooperateStatus: number;
+  createName: string;
+  createTime: string;
+  createUsername: string;
+  dataControl: boolean;
+  mfrCode: string;
+  mfrName: string;
+  mfrShortName: string;
+  sysid: number;
+  total?: number;
+};
+
+export type Supplier = {
+  supplierCode: string;
+  supplierName: string;
+};
+
+export type ParamsList = {
+  currentPage: string;
+  pageSize: string;
+};
+
+export type ParamsAdd = {
+  ghsCode: string | undefined;
+  cooperateStatus: number;
+  brandList: string | string[];
+  dataControl: boolean;
+  mfrName?:string;
+};
+
+export type BrandList = {
+  agentLevel: string;
+  applierName: string;
+  brand: string;
+  brandPass: string;
+  brandQualification: string;
+  count: number | null;
+  createTime: string;
+  expirationDate: string;
+  salePlat: number;
+};

src/views/manufacturer/index.vue

+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { getManufacturerListApi } from '/@/api/manufacturer';
+  import { List } from '/@/types/manufacturer';
+  import { Status } from '/@/const/manufacturer/';
+
+  const router = useRouter();
+
+  const data = ref({
+    tableData: [] as List[],
+    loading: false,
+    current: 1,
+    total: 50,
+  });
+
+  onMounted(() => {
+    getList();
+  });
+
+  const getList = async () => {
+    data.value.loading = true;
+    const res = await getManufacturerListApi({
+      currentPage: '1',
+      pageSize: '10',
+    }).finally(() => (data.value.loading = false));
+    if (res.message) {
+      data.value.tableData = res.data;
+      data.value.total = res.data.length;
+    }
+  };
+</script>
+<template>
+  <div class="manufacturer-list">
+    <a-button type="primary" @click="router.push('/manufacturer/operate')">新增合作商</a-button>
+    <a-table :data-source="data.tableData" :loading="data.loading" bordered :pagination="false">
+      <a-table-column title="厂商编码" align="center">
+        <template #default="{ record }">
+          {{ record.mfrCode }}
+        </template>
+      </a-table-column>
+      <a-table-column title="厂商全称" align="center">
+        <template #default="{ record }">
+          {{ record.mfrName }}
+        </template>
+      </a-table-column>
+      <a-table-column title="厂商简称" align="center">
+        <template #default="{ record }">
+          {{ record.mfrShortName }}
+        </template>
+      </a-table-column>
+      <a-table-column title="合作品牌" align="center">
+        <template #default="{ record }">
+          {{ record.brandList.join(',') }}
+        </template>
+      </a-table-column>
+      <a-table-column title="创建时间" align="center">
+        <template #default="{ record }">
+          {{ record.createTime }}
+        </template>
+      </a-table-column>
+      <a-table-column title="合作状态" align="center">
+        <template #default="{ record }">
+          {{ Status[record.cooperateStatus] }}
+        </template>
+      </a-table-column>
+      <a-table-column title="操作" align="center" :width="250">
+        <template #default="{ record }">
+          <a-button
+            type="link"
+            @click="router.push(`/manufacturer/operate?supplierCode=${record.mfrCode}`)"
+            >编辑</a-button
+          >
+          <a-button
+            type="link"
+            @click="router.push(`/manufacturer/detail?supplierCode=${record.mfrCode}`)"
+            >查看</a-button
+          >
+        </template>
+      </a-table-column>
+    </a-table>
+
+    <a-pagination v-model:current="data.current" :total="data.total" show-less-items />
+  </div>
+</template>
+<style lang="less" scoped>
+  .manufacturer-list {
+    background-color: var(--fy-bg-white);
+    padding: 16px;
+    :deep(.ant-btn) {
+      margin-bottom: 16px;
+    }
+    :deep(.ant-pagination) {
+      text-align: right;
+      margin-top: 16px;
+    }
+  }
+</style>

src/views/manufacturer/modules/detail.vue

+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { getManuFactureDetail } from '/@/api/manufacturer';
+  import { ParamsAdd } from '/@/types/manufacturer';
+  import { Status, DataContract } from '/@/const/manufacturer'
+
+  type QueryData = {
+    supplierCode: string | undefined;
+  };
+
+  const router = useRouter();
+  const route = useRoute();
+
+  const request = route.query as QueryData;
+
+  const activeKey = ref('1');
+
+  const current = ref(1);
+  const total = ref(10);
+
+  const getDetail = async () => {
+    if (!request.supplierCode) return;
+    const res = await getManuFactureDetail({ supplierCode: request.supplierCode });
+    if (res.success) {
+      formData.value = {
+        ghsCode: res.data.mfrCode,
+        brandList: res.data.brandList,
+        cooperateStatus: res.data.cooperateStatus,
+        dataControl: res.data.dataControl,
+        mfrName: res.data.mfrName,
+      };
+    }
+  };
+
+  watch(
+    () => activeKey.value,
+    () => {
+      getDetail();
+    },
+    { immediate: true },
+  );
+
+  const formData = ref<ParamsAdd>();
+
+  const dataSource = [
+    {
+      name: '艾伯康（上海）贸易有限公司',
+      code: 'GSH0261',
+      fanwei: '北京；山东；山西；河南',
+      pinpai: 'Abcam（艾伯康）',
+      time: '2023-01-02 15:00:01',
+    },
+  ];
+
+  const columns = [
+    {
+      title: '代理商编号',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '代理商全称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '授权范围',
+      dataIndex: 'fanwei',
+      key: 'fanwei',
+    },
+    {
+      title: '授权品牌',
+      dataIndex: 'pinpai',
+      key: 'pinpai',
+    },
+    {
+      title: '添加时间',
+      dataIndex: 'time',
+      key: 'time',
+    },
+  ];
+</script>
+<template>
+  <div class="manufacturer-detail">
+    <div class="manufacturer-detail-top">
+      <a-button type="primary" @click="router.push(`/manufacturer/operate?supplierCode=${request.supplierCode}`)">编辑</a-button>
+      <a-button>操作日志</a-button>
+    </div>
+
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1" tab="基本信息">
+        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+          <a-form-item label="供货商编码"> {{formData?.ghsCode}} </a-form-item>
+          <a-form-item label="供货商名称"> {{ formData?.mfrName }} </a-form-item>
+          <a-form-item label="合作状态"> {{ Status[formData?.cooperateStatus as number] }} </a-form-item>
+          <a-form-item label="合作品牌"> {{ Array.isArray(formData?.brandList) && formData?.brandList.join(',') }} </a-form-item>
+          <a-form-item label="数据控制"> {{ DataContract[formData?.dataControl + ''] }} </a-form-item>
+          <!-- <a-form-item label="合作渠道范围">
+            全国 <br />
+            指定省市：北京；山东；山西；河南
+          </a-form-item> -->
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="代理授权信息" force-render>
+        <a-table bordered :dataSource="dataSource" :columns="columns" :pagination="false" />
+        <a-pagination v-model:current="current" :total="total" show-less-items />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<style lang="less" scoped>
+  .manufacturer-detail {
+    background-color: var(--fy-bg-white);
+    padding: 16px;
+
+    &-top {
+      padding-top: 32px;
+      text-align: right;
+
+      :deep(.ant-btn-primary) {
+        margin-right: 12px;
+      }
+    }
+
+    :deep(.ant-form) {
+      width: 30%;
+    }
+
+    :deep(.ant-pagination) {
+      text-align: right;
+      margin-top: 16px;
+    }
+  }
+</style>

src/views/manufacturer/modules/operate.vue

+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { handleManufacturerAdd, getManuFactureDetail, handleEditApi } from '/@/api/manufacturer';
+  import { getSupplierApi, getBrandListApi } from '/@/api/manufacturer';
+  import { Supplier, BrandList, ParamsAdd } from '/@/types/manufacturer';
+  import moment from 'moment';
+
+  type QueryData = {
+    supplierCode: string | undefined;
+  };
+
+  const router = useRouter();
+
+  const route = useRoute();
+
+  const request = route.query as QueryData;
+
+  const loading = ref(false);
+
+  const formData = ref<ParamsAdd>({
+    ghsCode: undefined,
+    cooperateStatus: 1,
+    brandList: [],
+    dataControl: false,
+    mfrName: ''
+  });
+
+  const getDetailApi = async () => {
+    if (!request.supplierCode) return;
+    const res = await getManuFactureDetail({ supplierCode: request.supplierCode });
+    if (res.success) {
+      formData.value = {
+        ghsCode: res.data.mfrCode,
+        brandList: res.data.brandList,
+        cooperateStatus: res.data.cooperateStatus,
+        dataControl: res.data.dataControl,
+        mfrName: res.data.mfrName
+      };
+    }
+  };
+
+  // const options = [
+  //   { label: '北京', value: '北京' },
+  //   { label: '天津', value: '天津' },
+  //   { label: '山东', value: '山东' },
+  //   { label: '河北', value: '河北' },
+  //   { label: '北京', value: '北京' },
+  //   { label: '天津', value: '天津' },
+  //   { label: '山东', value: '山东' },
+  //   { label: '河北', value: '河北' },
+  //   { label: '北京', value: '北京' },
+  //   { label: '天津', value: '天津' },
+  //   { label: '山东', value: '山东' },
+  //   { label: '河北', value: '河北' },
+  //   { label: '北京', value: '北京' },
+  //   { label: '天津', value: '天津' },
+  //   { label: '山东', value: '山东' },
+  //   { label: '河北', value: '河北' },
+  // ];
+
+  onMounted(() => {
+    getSupplier();
+    getBrandList();
+    getDetailApi();
+  });
+
+  const supplierList = ref<Supplier[]>();
+  const getSupplier = async () => {
+    const res = await getSupplierApi();
+    supplierList.value = res.data;
+  };
+
+  const brandList = ref<BrandList[]>();
+  const brandLoading = ref(false);
+  const getBrandList = async () => {
+    brandLoading.value = true;
+    const res = await getBrandListApi({ brand: '' }).finally(() => (brandLoading.value = false));
+    if (res.success) {
+      brandList.value = res.data.filter(
+        (e) => moment(e.expirationDate).valueOf() >= moment(new Date()).startOf('day').valueOf(),
+      );
+    }
+  };
+
+  const formRef = ref();
+  const submit = () => {
+    formRef.value.validate().then(async () => {
+      loading.value = true;
+      const requestMethod = request.supplierCode ? handleEditApi : handleManufacturerAdd
+      const res = await requestMethod({
+        ...(formData.value as ParamsAdd),
+        brandList: Array.isArray(formData.value.brandList)
+          ? formData.value.brandList.join(',')
+          : '',
+      }).finally(() => (loading.value = false));
+      if (res.success) {
+        router.push('/manufacturer/index');
+        message.success(res.message);
+      } else {
+        message.warning(res.message);
+      }
+    });
+  };
+</script>
+<template>
+  <div class="manufacturer-operate">
+    <div class="manufacturer-operate-top">
+      <a-button @click="router.push('/manufacturer/index')">取消</a-button>
+      <a-button type="primary" @click="submit" :loading="loading">提交</a-button>
+    </div>
+
+    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" ref="formRef">
+      <a-form-item label="供货商编码" v-if="request.supplierCode">
+        {{ formData.ghsCode }}
+      </a-form-item>
+      <a-form-item
+        label="供货商名称"
+        name="ghsCode"
+        :rules="[
+          {
+            required: request.supplierCode ? false : true,
+            message: '请选择供货商名称',
+            trigger: 'change',
+          },
+        ]"
+      >
+        <span v-if="request.supplierCode">{{ formData.mfrName }}</span>
+        <a-select
+          v-else
+          v-model:value="formData.ghsCode"
+          style="width: 100%"
+          placeholder="请选择供货商名称"
+        >
+          <template v-for="item in supplierList" :key="item.supplierCode">
+            <a-select-option :value="item.supplierCode">{{ item.supplierName }}</a-select-option>
+          </template>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="合作状态">
+        <a-radio v-model:checked="formData.cooperateStatus" disabled>进行中</a-radio>
+      </a-form-item>
+      <a-form-item
+        label="合作品牌"
+        name="brandList"
+        :rules="[{ required: true, message: '请选择合作品牌', trigger: 'change' }]"
+      >
+        <a-select
+          v-loading="brandLoading"
+          v-model:value="formData.brandList"
+          mode="multiple"
+          style="width: 100%"
+          placeholder="请选择合作品牌"
+        >
+          <a-select-option v-for="(item, index) in brandList" :key="index" :value="item.brand">{{
+            item.brand
+          }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        label="数据控制"
+        name="dataControl"
+        :rules="[{ required: true, message: '请选择数据控制', trigger: 'change' }]"
+      >
+        <a-radio-group v-model:value="formData.dataControl">
+          <a-radio :value="true">允许非厂商数据存在</a-radio>
+          <a-radio :value="false">不允许非厂商数据存在</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <!-- <a-form-item
+        label="合作渠道范围"
+        class="last-item"
+        name="fanwei"
+        :rules="[{ required: true, message: '合作渠道范围', trigger: 'change' }]"
+      >
+        <a-radio-group v-model:value="formData.fanwei">
+          <a-radio value="3">全国</a-radio>
+          <a-radio value="4">指定省市</a-radio>
+        </a-radio-group>
+        <a-checkbox-group
+          v-if="formData.fanwei === '4'"
+          v-model:value="formData.value1"
+          name="checkboxgroup"
+          :options="options"
+        />
+      </a-form-item> -->
+    </a-form>
+  </div>
+</template>
+<style lang="less" scoped>
+  .manufacturer-operate {
+    background-color: var(--fy-bg-white);
+    padding: 16px;
+    &-top {
+      padding: 32px 0 16px;
+      margin-bottom: 16px;
+      text-align: right;
+      border-bottom: 1px solid var(--fy-border-bottom-bg);
+
+      :deep(.ant-btn-primary) {
+        margin-left: 12px;
+      }
+    }
+    :deep(.ant-form) {
+      width: 30%;
+    }
+    // .last-item {
+    //   :deep(.ant-checkbox-group) {
+    //     display: flex;
+    //     flex-wrap: wrap;
+    //     justify-content: space-between;
+    //     margin-top: 12px;
+    //   }
+
+    //   :deep(.ant-checkbox-wrapper) {
+    //     flex: 0 0 calc(50% - 12px);
+    //     margin-bottom: 12px;
+    //     margin-right: 12px;
+    //   }
+
+    //   :deep(.ant-radio-group) {
+    //     display: flex;
+    //     justify-content: space-between;
+    //   }
+
+    //   :deep(.ant-radio-wrapper) {
+    //     flex: 0 0 calc(50% - 12px);
+    //     margin-right: 12px;
+    //   }
+    // }
+  }
+</style>