build

src/App.vue

@@ -12,8 +12,6 @@ import { useCompany } from "./hooks/core/useCompany";
 
 const store = useCompany()
 
-
-
 const mapToComponent = {
   "/enterpriseManagement/company": defineAsyncComponent(() => import("/@/views/enterpriseManagement/company/index.vue")),
   "/enterpriseManagement/invoiceheader": defineAsyncComponent(() => import("/@/views/enterpriseManagement/invoiceheader/index.vue")),
@@ -26,8 +24,6 @@ const mapToComponent = {
   "/goodStore/goodsCostDetail": defineAsyncComponent(() => import("/@/views/goodStore/goodsCost/detail.vue")),
 }
 
-// mapToComponent['/goodStore/goodsCostDetail']
-
 export default defineComponent({
   name: "app",
   components: {

src/api/goodStore/goodsCost/index.ts

@@ -40,8 +40,12 @@ export const httpCreate = (data): any => {
     return http.request("post", `${yewuApi}interadd`, { data });
 };
 
+export const httpDetail = (data): any => {
+    return http.request("post", `${yewuApi}goodupinfo`, { data });
+};
 
 
-export const httpDetail = (data): any => {
-    return http.request("post", `${yewuApi}interinfo`, { data });
+export const httpSupplierDetail = (data): any => {
+    return http.request("post", `http://pro.test.caixiao365.com/user/supplier/list`, { data });
 };
+

src/api/netOrderEnter/netOrderEntry/index.ts

@@ -53,12 +53,7 @@ export const httpCustomerlist = (data): any => {
 };
 
 export const httpCompanylist = (data): any => {
-    return http.request("post", `${yewuApi}companylist`, {
-        data: {
-            ...data,
-            noRela: true
-        }
-    });
+    return http.request("post", `${yewuApi}companylist`, {  data: { ...data,  noRela: true }});
 };
 
 export const httpSupplierlist = (data): any => {

src/components/BasicForm/src/fields/business-query.vue

@@ -16,12 +16,10 @@ const value = useVModel(props, "modelValue");
 
 const RemoteSelectRef = ref<InstanceType<typeof RemoteSelect> | null>(null);
 
-onMounted(() => {
-  value.value && (RemoteSelectRef.value as any).initalData(value.value);
-});
+onMounted(() => {  value.value && (RemoteSelectRef.value as any).initialData(value.value)  });
 
 defineExpose({
-  initalData: data => (RemoteSelectRef.value as any).initalData(data)
+  initalData: data => (RemoteSelectRef.value as any).initialData(data)
 });
 </script>
 

src/components/ImageUpload/index.ts

@@ -1,6 +1,4 @@
 import MultipleImageUpload from "./src/index.vue";
 import ImageSingleUpload from "./src/single.vue";
 
-// export default ImageUpload;
-
 export { ImageSingleUpload, MultipleImageUpload };

src/views/enterpriseManagement/invoiceheader/index.vue

@@ -20,18 +20,18 @@ const hooks: PageHooks = {
 const events: PageEvents = {
   content: {
     create: () => {
-      state.visible = true
-      state.type = 'create'
+      state['visible'] = true
+      state['type'] = 'create'
     },
     preview: (item) => {
-      state.visible = true
-      state.type = 'preview'
-      state.data = { ...item }
+      state['visible'] = true
+      state['type'] = 'preview'
+      state['data'] = { ...item }
     },
     update: (item) => {
-      state.visible = true
-      state.type = 'update'
-      state.data = { ...item }
+      state['visible'] = true
+      state['type'] = 'update'
+      state['data'] = { ...item }
     }
   }
 };

src/views/enterpriseManagement/invoiceheader/modal.vue

@@ -39,15 +39,7 @@ const formData = ref({
 
 const rules = {
     invoice_title: [{ required: true, trigger: "change", message: "请输入发票抬头名称" }],
-    invoice_code: [
-        {
-            validator(_, value) {
-                return isLicense(value);
-            },
-            required: true,
-            message: "纳税人识别号格式不正确"
-        }
-    ],
+    invoice_code: [{ validator: (_, value) => isLicense(value),  message: "纳税人识别号格式不正确", required: true }],
     invoice_bank: [{ required: true, trigger: "change", message: "请输入企业开户银行" }],
     invoice_bankNo: [{ required: true, trigger: "change", message: "请输入银行账户" }],
     invoice_adrr: [{ required: true, trigger: "change", message: "请输入企业注册地址" }],
@@ -82,12 +74,12 @@ watch(() => props.visible, () => {
 
     if(isCreate){
         formData.value = {
+            invoice_mobile: '',
+            invoice_bankNo: '',
             invoice_title: '',
             invoice_code: '',
             invoice_bank: '',
-            invoice_bankNo: '',
-            invoice_adrr: '',
-            invoice_mobile: '',
+            invoice_adrr: ''
         }
     } else {
         formData.value = { ...props.data }
@@ -99,11 +91,11 @@ watch(() => props.visible, () => {
     <ElDialog v-model="visible" :title="title" center>
         <ElForm label-width="120px" :model="formData" :rules="rules" ref="formRef" :disabled="type === 'preview'">
             <ElFormItem label="发票公司抬头" prop="invoice_title">
-                <ElInput v-model="formData.invoice_title" placeholder="发票公司抬头" @click="innerVisible = true" />
+                <ElInput v-model="formData['invoice_title']" placeholder="发票公司抬头" @click="innerVisible = true" />
             </ElFormItem>
 
             <ElFormItem label="统一社会信用代码" prop="invoice_code" label-width="150px">
-                <ElInput v-model="formData.invoice_code" disabled placeholder="统一社会信用代码" />
+                <ElInput v-model="formData['invoice_code']" disabled placeholder="统一社会信用代码" />
             </ElFormItem>
 
             <ElFormItem label="企业开户银行" prop="invoice_bank">
@@ -111,15 +103,15 @@ watch(() => props.visible, () => {
             </ElFormItem>
 
             <ElFormItem label="银行账户" prop="invoice_bankNo">
-                <ElInput v-model="formData.invoice_bankNo" placeholder="银行账户" />
+                <ElInput v-model="formData['invoice_bankNo']" placeholder="银行账户" />
             </ElFormItem>
 
             <ElFormItem label="企业注册地址" prop="invoice_adrr">
-                <ElInput v-model="formData.invoice_adrr" placeholder="企业注册地址" />
+                <ElInput v-model="formData['invoice_adrr']" placeholder="企业注册地址" />
             </ElFormItem>
 
             <ElFormItem label="企业联系方式" prop="invoice_mobile">
-                <ElInput v-model="formData.invoice_mobile" placeholder="企业联系方式" />
+                <ElInput v-model="formData['invoice_mobile']" placeholder="企业联系方式" />
             </ElFormItem>
 
             <ElFormItem>

src/views/enterpriseManagement/supplierManager/components/BasicForm.vue

@@ -33,21 +33,21 @@ const loading = ref(false)
 const emit = defineEmits(['refresh'])
 const props = defineProps<{ type: string; id: number, newTime: string }>()
 
-
 const addrRef = ref<any>(null)
 
-const companyDetailTask = useTask({ initialData: {}, success(data){
-    formData.value.bankList = data.BankInfo
-} })
+const companyDetailTask = useTask({ 
+    initialData: {}, 
+    success(data) {
+        formData.value.bankList = data.BankInfo
+    } 
+})
 
 const invoiceDetailTask = useTask({
-    initialData: {}, success(data) {
-
+    initialData: {}, 
+    success(data) {
         if(data.list.length !== 0){
             invoiceDetailTask.data = data.list[0]
             formData.value.invoice_id = data.list[0].id
-
-            console.log(invoiceDetailTask.data)
         } else {
             invoiceDetailTask.data = {}
             formData.value.invoice_id = ''
@@ -177,7 +177,7 @@ async function handleSubmit() {
         return
     }
 
-    if (!formData.value.invoice_id) {
+    if (!formData.value.invoice_code) {
         ElMessage.warning('请选择抬头信息')
         return
     }

src/views/enterpriseManagement/supplierManager/components/config/columns.ts

@@ -1,5 +1,5 @@
-import { statusOptions } from "../cpns/ChooseCompany/config/_options"
 import { h } from "vue"
+import { statusOptions } from "../cpns/ChooseCompany/config/_options"
 import { ElImage, ElTag } from "element-plus"
 import { taxpayerOptions } from "../../../company/components/config/_options"
 

src/views/enterpriseManagement/supplierManager/detail.vue

@@ -12,7 +12,6 @@ function handleRefresh(){
 
 <template>
     <div class="p-[10px]">
-        <!-- {{ route.query.type }} - {{ route.query.id }} -->
-        <BasicForm ref="formRef" :type="route.query.type" :id="Number(route.query.id)"  @refresh="handleRefresh"/>
+        <BasicForm ref="formRef" :type="route.query.type" :id="number(route.query.id)"  @refresh="handleRefresh"/>
     </div>
 </template>

src/views/goodStore/goodsCost/components/base-detail.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue"
+import BasicDescriptions from "/@/components/BasicDescriptions";
+import { basicColumns, fixedOrLadderCostColumns } from "./../config/columns"
+import { httpDetail, httpSupplierDetail } from "/@/api/goodStore/goodsCost";
+import { useTask } from "/@/hooks/core"
+import { taxpayerOptions } from "/@/views/enterpriseManagement/company/components/config/_options";
+
+const props = defineProps<{ spuCode?: string }>()
+
+const activeNames = ref([1, 2, 3])
+
+
+const detailTask = useTask<Record<any, any>>({ initialData: {}, success: () => initialLegaler() })
+
+
+const state = reactive({
+    company: null,
+    supplier: null,
+    cgdSupplier: null,
+
+    loading: false
+})
+
+
+async function initialLegaler(){
+    state.loading = true
+    const company = await httpSupplierDetail({ code: detailTask.data.companyNo })
+    const supplier = await httpSupplierDetail({ code: detailTask.data.supplierNo })
+    const cgdSupplier = await httpSupplierDetail({ code: detailTask.data.cgd_supplier_code })
+    state.loading = false
+
+    state.company = company.data.list[0].legaler_type
+    state.supplier = supplier.data.list[0].legaler_type
+    state.cgdSupplier = cgdSupplier.data.list[0].legaler_type
+}
+
+const taxInfo = computed(() => {
+    const empty = [
+        { type: '业务公司进项', legaler_type: state.supplier },
+        { type: '业务公司销项', legaler_type: state.company },
+    ]
+
+    if (!detailTask.data) return empty
+    if (!detailTask.data.tax_info) return empty
+    if (Array.isArray(detailTask.data.tax_info)) return empty
+
+    const {
+        in_tax_merge,
+        in_tax_name,
+        in_tax_short,
+        tax,
+        out_tax_merge,
+        out_tax_name,
+        out_tax_short,
+        out_tax,
+        inv_good_name,
+        open_type,
+        cgd_tax_merge,
+        cgd_tax_name,
+        cgd_tax_short,
+        cgd_tax
+    } = detailTask.data.tax_info
+
+    return {
+        list: [
+            ...(detailTask.data.cgd_supplier_name ?
+                [{
+                    type: '源头销项',
+                    legaler_type: state.cgdSupplier,
+                    tax_code: cgd_tax_merge,
+                    tax_name: cgd_tax_name,
+                    short_name: cgd_tax_short,
+                    tax: cgd_tax ? cgd_tax : ''
+                }] : []),
+            { type: '业务公司进项', legaler_type: state.supplier, tax_code: in_tax_merge, tax_name: in_tax_name, short_name: in_tax_short, tax: tax ? tax + '%' : '' },
+            { type: '业务公司销项', legaler_type: state.cgdSupplier, tax_code: out_tax_merge, tax_name: out_tax_name, short_name: out_tax_short, tax: out_tax }
+        ],
+        inv_good_name,
+        open_type
+    }
+})
+
+
+detailTask.run(httpDetail({ spuCode: props['spuCode'] }))
+</script>
+
+<template>
+    <ElCollapse v-model="activeNames" style="width: 100%" v-loading="detailTask['loading']">
+        <ElCollapseItem title="基础信息" :name="1">
+            <BasicDescriptions 
+                :columns="basicColumns" 
+                :data="detailTask['data']" 
+                style="width: 100%" 
+            />
+        </ElCollapseItem>
+
+        <ElCollapseItem title="固定与阶梯成本" :name="2">
+            <BasicDescriptions 
+                :columns="fixedOrLadderCostColumns" 
+                :data="detailTask['data']" 
+                style="width: 100%" 
+            />
+        </ElCollapseItem>
+
+        <ElCollapseItem title="类目详情" :name="3">
+            <ElTable size="small" border :data="taxInfo.list">
+                <ElTableColumn width="120px" prop="type" />
+                <ElTableColumn label="卖出方纳税人资质">
+                    <template #="{ row }">
+                        {{ taxpayerOptions.find(item => item.value == row.legaler_type)?.label || '--' }}
+                    </template>
+                </ElTableColumn>
+                <ElTableColumn label="采购商品税目编号" prop="tax_code"  />
+                <ElTableColumn label="货物和劳务名称" prop="tax_name" />
+                <ElTableColumn label="商品和服务分类简称" prop="short_name" />
+                <ElTableColumn label="增值税税率" prop="tax" />
+            </ElTable>
+        </ElCollapseItem>
+    </ElCollapse>
+</template>

src/views/goodStore/goodsCost/components/base-form.vue

@@ -0,0 +1,365 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { BusinessQuery, SupplierQuery } from "/@/components/BasicForm"
+import { isStockOtpions } from "./../config/options"
+import { UnitInput } from "/@/components/Input"
+
+import { ImageSingleUpload, MultipleImageUpload } from "/@/components/ImageUpload"
+</script>
+
+<template>
+    <div class="cost-form">
+        <ElForm label-width="100px">
+            <div class="cost-form__basic">
+                <p class="title">基础信息</p>
+
+                <ElRow class="content">
+                    <ElCol :span="12">
+                        <ElFormItem label="业务公司">
+                            <BusinessQuery />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="是否库存品">
+                            <ElSelect style="width: 100%">
+                                <ElOption v-for="opt in isStockOtpions" :label="opt['name']" :value="opt['id']" />
+                            </ElSelect>
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="组合类型">
+                            <ElSelect style="width: 100%">
+                                <ElOption v-for="opt in isStockOtpions" :label="opt['name']" :value="opt['id']" />
+                            </ElSelect>
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="12">
+                        <ElFormItem label="供应商">
+                            <SupplierQuery />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="12">
+                        <ElFormItem label="商品名称">
+                            <ElInput placeholder="商品名称" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="商品分类">
+                            <ElInput placeholder="商品分类" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="商品品牌">
+                            <ElInput placeholder="商品品牌" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="销售权限">
+                            <ElSelect placeholder="销售权限" style="width: 100%">
+                            </ElSelect>
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="单位">
+                            <ElInput placeholder="单位" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="专属类型">
+                            <ElInput placeholder="专属类型" />
+                        </ElFormItem>
+                    </ElCol>
+
+
+                    <ElCol :span="8">
+                        <ElFormItem label="商品总重量">
+                            <ElInput placeholder="商品总重量" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="工艺材质">
+                            <ElInput type="textarea" placeholder="工艺材质" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="售后说明">
+                            <ElInput type="textarea" placeholder="售后说明" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="商品备注">
+                            <ElInput type="textarea" placeholder="商品备注" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="是否定制">
+                            <el-select placeholder="是否定制">
+                            </el-select>
+                        </ElFormItem>
+                    </ElCol>
+                </ElRow>
+            </div>
+
+            <div class="cost-form__basic">
+                <p class="title">商品类目</p>
+
+                <ElRow class="content">
+                    <ElCol :span="18">
+                        <ElFormItem label="开票商品名称">
+                            <el-input placeholder="开票商品名称" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="供应商销项票开" label-width="120px">
+                            <el-select />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="18">
+                        <ElFormItem label="采购商品税目">
+                            <el-select />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="税率">
+                            <el-select />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="是否跳过财务审核" label-width="130px">
+                            <el-select />
+                        </ElFormItem>
+                    </ElCol>
+                </ElRow>
+            </div>
+
+            <div class="cost-form__basic">
+                <p class="title">规格信息</p>
+
+                <div class="content">
+                    <ElTable size="small" border>
+                        <ElTableColumn label="规格类型" />
+                        <ElTableColumn label="规格值" />
+                        <ElTableColumn label="操作" />
+                    </ElTable>
+                </div>
+            </div>
+
+            <div class="cost-form__basic">
+                <p class="title">包装信息</p>
+
+                <ElRow class="content">
+                    <ElCol :span="6">
+                        <ElFormItem label="包装信息">
+                            <ElInput placeholder="包装信息" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="装箱规格">
+                            <ElInput placeholder="装修规格" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="装箱重量">
+                            <UnitInput unit="g" placeholder="装箱重量" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="装箱尺寸">
+                            <ElInput placeholder="装箱尺寸" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="商品尺寸">
+                            <ElInput placeholder="商品尺寸" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="商品条形码">
+                            <ElInput placeholder="商品条形码" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="12">
+                        <ElFormItem label="包装清单">
+                            <ElInput placeholder="包装清单" />
+                        </ElFormItem>
+                    </ElCol>
+                </ElRow>
+            </div>
+
+            <div class="cost-form__basic">
+                <p class="title">发货信息</p>
+
+                <ElRow class="content">
+                    <ElCol :span="6">
+                        <ElFormItem label="供货区域">
+                            <ElSelect placeholder="供货区域">
+
+                            </ElSelect>
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="物流时间">
+                            <UnitInput placeholder="物流时间" unit="天" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="供货周期">
+                            <UnitInput placeholder="供货周期" unit="天" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="调样周期">
+                            <UnitInput placeholder="调样周期" unit="天" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="12">
+                        <ElFormItem label="发货地">
+                            <ElInput />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="12">
+                        <ElFormItem label="产地">
+                            <ElInput />
+                        </ElFormItem>
+                    </ElCol>
+                </ElRow>
+            </div>
+
+            <div class="cost-form__basic">
+                <p class="title">图片信息</p>
+                <ElRow class="content">
+                    <ElCol :span="8">
+                        <div>
+                            <ElFormItem label="商品缩略">
+                                <div class="flex items-center">
+                                    <ImageSingleUpload />
+                                    <div class="ml-[10px]" style="font-size: 12px;">
+                                        <p class="mb-[-15px]">尺寸比例:</p>
+                                        <p>1:1</p>
+                                    </div>
+                                </div>
+                            </ElFormItem>
+
+                            <div class="flex ml-[40px]" style="font-size: 12px;">
+                                <p class="mr-[10px]">图片大小: 小于1M</p>
+                                <p>图片类型.jpg/png/jpeg</p>
+                            </div>
+                        </div>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="商品主图">
+                            <MultipleImageUpload />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="8">
+                        <ElFormItem label="详情介绍">
+                            <MultipleImageUpload />
+                        </ElFormItem>
+                    </ElCol>
+                </ElRow>
+            </div>
+
+            <div class="cost-form__basic" style="border-bottom: 1px solid #dcdfe6;">
+                <p class="title">固定与阶梯成本</p>
+                <ElRow class="content">
+                    <ElCol :span="6">
+                        <ElFormItem label="打样费">
+                            <UnitInput unit="元" placeholder="打样费" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="开模费">
+                            <UnitInput unit="元" placeholder="开模费" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="调样费">
+                            <UnitInput unit="元" placeholder="开模费" />
+                        </ElFormItem>
+                    </ElCol>
+
+                    <ElCol :span="6">
+                        <ElFormItem label="市场价">
+                            <UnitInput unit="元" placeholder="市场价" />
+                        </ElFormItem>
+                    </ElCol>
+
+
+                    <ElCol :span="24">
+                        <ElTable size="small" border>
+                            <ElTableColumn label="起订量(>=)" />
+                            <ElTableColumn label="成本单价" />
+                            <ElTableColumn label="工艺费" />
+                            <ElTableColumn label="物流费" />
+                            <ElTableColumn label="证书费" />
+                            <ElTableColumn label="加标费" />
+                            <ElTableColumn label="包装费" />
+                            <ElTableColumn label="其他费用" />
+                            <ElTableColumn label="成本合计" />
+                            <ElTableColumn label="操作" />
+                        </ElTable>
+                    </ElCol>
+                </ElRow>
+            </div>
+        </ElForm>
+    </div>
+</template>
+
+<style lang="scss">
+.cost-form {
+    display: flex;
+    flex-direction: column;
+
+    &__basic {
+        display: flex;
+        border-top: 1px solid #dcdfe6;
+
+        .title {
+            min-width: 40px;
+            width: 40px;
+            display: flex;
+            align-items: center;
+            padding: 5px;
+            border-right: 1px solid #dcdfe6;
+        }
+
+        .content {
+            padding: 10px;
+            flex: 1;
+        }
+
+    }
+}
+</style>

src/views/goodStore/goodsCost/components/update-record.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{ spuCode: string }>()
+</script>
+
+<template>
+    <div class="update-container">
+        <div class="update-container__header">
+            <p>数据编码: {{ spuCode }}</p>
+            
+            <p>
+                数据类型: 
+                <el-tag size="small">商品成本信息</el-tag>
+            </p>
+            
+            <p>修改账户:</p>
+            <p>修改时间:</p>
+        </div>
+
+        <el-table size="small" border>
+            <el-table-column width="100px" label="修改字段名称" />
+            <el-table-column width="100px" label="修改字段" />
+            <el-table-column label="修改前" />
+            <el-table-column label="修改后" />
+        </el-table>
+    </div>
+</template>
+
+
+<style lang="scss">
+.update-container {
+    display: flex;
+    flex-direction: column;
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+}
+</style>

src/views/goodStore/goodsCost/config/columns.ts

@@ -0,0 +1,283 @@
+import { ElImage, ElTable, ElTableColumn } from "element-plus"
+import { h } from "vue"
+import { options3 } from "./options"
+
+export const basicColumns = [
+    {
+        span: 8,
+        label: '商品分类',
+        render(_, { cat_info }){
+            if(!cat_info) return null
+            return cat_info.map(({ name }) => name).join('_')
+        }
+    },
+    {
+        span: 8,
+        label: '商品主图',
+        render(_, { good_img }){
+            if(!good_img) return null
+            const images = good_img.split(',')
+            return h('div', { style: { display: 'flex', gap: '1' } }, images.map(imageURI => {
+                return h(ElImage, { src: imageURI, previewSrcList: [imageURI], previewTeleported: true, style: { height: '20px', width: '20px' } })
+            }))
+        }
+    },
+    {
+        span: 8,
+        label: '详情图片',
+        render(_, { good_info_img }) {
+            if (!good_info_img) return null
+            return h(ElImage, { src: good_info_img, previewSrcList: [good_info_img], previewTeleported: true, style: { height: '20px', width: '20px' } })
+        }
+    },
+    {
+        span: 24,
+        label: '商品名称',
+        field: 'good_name'
+    },
+    {
+        span: 12,
+        label: '业务公司',
+        field: 'companyName'
+    },
+    {
+        span: 12,
+        label: '供应商',
+        field: 'supplierName'
+    },
+    {
+        span: 12,
+        label: '源头供应商',
+        field: 'cgd_supplier_name'
+    },
+    {
+        span: 12,
+        label: '源头竞单人',
+        field: 'cgd_apply_name'
+    },
+    {
+        span: 6,
+        label: '商品品牌',
+        field: 'brand_name'
+    },
+    {
+        span: 6,
+        label: '销售权限',
+        render(_, { is_auth }){
+            return options3.find(item => item.id == is_auth)?.name
+        }
+    },
+    {
+        span: 6,
+        label: '单位',
+        field: 'unit'
+    },
+    {
+        span: 6,
+        label: '供应商销项票开',
+        render(_, { open_type }){
+            return open_type == '1' ? '原商品开票' : open_type == '2' ? '子商品开票' : '--'
+        }
+    },
+    {
+        span: 24,
+        label: '开票商品名称',
+        render(_, { tax_info }){
+            if(!tax_info) return null
+            return tax_info.inv_good_name
+        }
+    },
+    {
+        span: 6,
+        label: '专属类型',
+        render(_, { is_exclusive }){
+            return is_exclusive == '0' ? '非泰康' : '泰康'
+        }
+    },
+    {
+        span: 6,
+        label: '商品总重量',
+        render(_, { weight }){
+            return weight + 'g'
+        }
+    },
+    {
+        span: 6,
+        label:' 是否库存品',
+        render(_, { is_stock }){
+            return is_stock == '0' ? '非库存商品' : '库存商品'
+        }
+    },
+    {
+        span: 6,
+        label: '组合类型',
+        render(_, { is_combind }){
+            return is_combind == '0' ? '非组合商品' : '组合商品'
+        }
+    },
+    {
+        span: 18,
+        label: '贵金属信息',
+        render(_, { noble_metal, noble_weight, gold_price, is_gold_price, is_diff, config, other_config }){
+            if(!noble_metal) return
+            return `
+                ${noble_weight ? noble_weight : 0}g-${gold_price ? gold_price : '0'}元/g-
+                ${is_gold_price == '0' ? '不' : ''}启用实时金价-
+                ${is_diff == '1' ? '有' : '无'}工差-
+                ${config}-
+                ${other_config}
+            `
+        }
+    },
+    {
+        span: 6,
+        label: '来源',
+        render(_, { create_source }){
+            return create_source == '1' ? '咨询成交商品' : '手动创建商品'
+        }
+    },
+    {
+        span: 24,
+        label: '售后说明',
+        field: 'after_sales'
+    },
+    {
+        span: 24,
+        label: '商品备注',
+        field: 'good_remark'
+    },
+    {
+        span: 18,
+        label: '工艺材质',
+        field: 'craft_desc'
+    },
+    {
+        span: 6,
+        label: '起订量',
+        field: 'stock_moq'
+    },
+    {
+        span: 6,
+        label: '包装方式',
+        field: 'packing_way'
+    },
+    {
+        span: 6,
+        label: '装箱规格',
+        field: 'packing_spec'
+    },
+    {
+        span: 6,
+        label: '装箱重量',
+        render(_, { packing_weight }){
+            return packing_weight + 'g'
+        }
+    },
+    {
+        span: 6,
+        label: '装箱尺寸',
+        field: 'packing_size'
+    },
+    {
+        span: 6,
+        label: '商品尺寸',
+        field: 'good_size'
+    },
+    {
+        span: 6,
+        label: '商品条形码',
+        field: 'good_bar',
+    },
+    {
+        span: 12,
+        label: '商品清单',
+        prop: 'packing_list',
+    },
+    {
+        span: 6,
+        label: '供货区域',
+        prop: 'packing_spec',
+    },
+    {
+        span: 6,
+        label: '物流天数',
+        render(_, { delivery_day }){
+            return delivery_day + '天'
+        }
+    },
+    {
+        span: 6,
+        label: '供货周期',
+        render(_, { lead_time }) {
+            return lead_time + '天'
+        }
+    },
+    {
+        span: 6,
+        label: '调样周期',
+        render(_, { sample_day }) {
+            return sample_day + '天'
+        }
+        // field: 'sample_day'
+    },
+    {
+        span: 12,
+        label: '发货地',
+        field: 'delivery_place'
+    },
+    {
+        span: 12,
+        label: '产地',
+        field: 'origin_place'
+    }
+]
+
+
+export const fixedOrLadderCostColumns = [
+    {
+        span: 6,
+        label: '打样费',
+        render(_, { demo_fee }){
+            return demo_fee + '元'
+        }
+    },
+    {
+        span: 6,
+        label: '开模费',
+        render(_, { open_fee }){
+            return open_fee + '元'
+        }
+    },
+    {
+        span: 6,
+        label: '调样费',
+        render(_, { sample_fee  }){
+            return sample_fee + '元'
+        }
+    },
+    {
+        span: 6,
+        label: '市场价',
+        render(_, { market_price }){
+            return market_price + '元'
+        }
+    },
+    {
+        span: 24,
+        label: '阶梯成本',
+        render(_, { nakelist }){
+            return h(ElTable, { size: 'small', border: true, data: nakelist || [], style: { padding: '10px' } }, [
+                h(ElTableColumn, { label: '起订量(>=)', prop: 'min_num' }),
+                h(ElTableColumn, { label: '成本单价', prop: 'nake_fee' }),
+                h(ElTableColumn, { label: '源头采购成本', prop: 'supplier_origin_price' }),
+                h(ElTableColumn, { label: '工艺费', prop: 'cost_fee' }),
+                h(ElTableColumn, { label: '物流费', prop: 'delivery_fee' }),
+                h(ElTableColumn, { label: '证书费', prop: 'cert_fee' }),
+                h(ElTableColumn, { label: '加标费', prop: 'mark_fee' }),
+                h(ElTableColumn, { label: '包装费', prop: 'package_fee' }),
+                h(ElTableColumn, { label: '其他费用', prop: "other_fee" }),
+                h(ElTableColumn, { label: '成本合计', prop: 'nake_total' })
+            ])
+        }
+    }
+]

src/views/goodStore/goodsCost/detail.vue

@@ -1,7 +1,44 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed } from "vue"
+import UpdateRecord from "./components/update-record.vue"
+import BaseDetail from "./components/base-detail.vue"
+import BaseForm from "./components/base-form.vue"
+import { useRoute } from "vue-router"
+
+const route = useRoute()
+
+
+const state = computed(() => {
+    const spuCode = route.query.id as string
+    return {
+        isCreate: !spuCode,
+        spuCode
+    }
+})
+
+
+</script>
 
 <template>
-    <div>
-        details
+    <div class="detail-container">
+        <ElTabs>
+            <template v-if="state.isCreate">
+                <ElTabPane label="新建商品成本">
+                    <base-form />
+                </ElTabPane>
+            </template>
+
+            <template v-else>
+                <ElTabPane label="商品成本详情">
+                    <base-detail :spu-code="state.spuCode" />
+                </ElTabPane>
+            </template>
+        </ElTabs>
     </div>
-</template>
+</template>
+
+<style lang="scss">
+.detail-container {
+    padding: 10px;
+}
+</style>

src/views/goodStore/goodsCost/index.vue

@@ -2,21 +2,25 @@
 import { ref } from "vue"
 import contentConfig from "./config/content.config";
 import searchConfig from "./config/search.config";
-import modalConfig from "./config/modal.config";
-import { usePageSearch, usePageModal, type PageHooks } from "/@/hooks/page";
+import { usePageSearch, type PageHooks, PageEvents } from "/@/hooks/page";
 import { useCompany } from "/@/hooks/core/useCompany";
-import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-import { httpSet } from "/@/api/enterpriseManagement/bankManager";
-import { ElMessage, ElMessageBox } from "element-plus";
+
+import { useRouter } from "vue-router"
 
 const contentRef = ref<any>(null)
-const loading = ref(false)
+const router = useRouter()
 
 const hooks: PageHooks = {
-  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig),
-  pageModalHook: pageContentRef => usePageModal({ pageContentRef })
+  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
 };
 
+const events: PageEvents = {
+  content: {
+    preview: ({ spuCode }) => router.push('/goodStore/goodsCostDetail?id=' + spuCode),
+    create: () => router.push('/goodStore/goodsCostDetail'),
+  }
+}
+
 const { permission } = useCompany()
 </script>
 
@@ -26,7 +30,7 @@ const { permission } = useCompany()
     :permissions="permission" 
     :contentConfig="contentConfig" 
     :search-config="searchConfig"
-    :modal-config="modalConfig" 
+    :events="events" 
     :get-content-ref="ref => contentRef = ref" 
   />
 </template>