fix: 格式化代码

src/api/product.ts

 import request from '@/utils/request'
 import request from '@/utils/request'
 
 
-
 //设计产品/成品/系统素材三级分类列表
 //设计产品/成品/系统素材三级分类列表
 export function shopTypeList(params?: any) {
 export function shopTypeList(params?: any) {
-    return request.get({ url: '/api/diy/template/type/list', params })
+  return request.get({ url: '/api/diy/template/type/list', params })
 }
 }
 
 
 //新增设计产品/成品/系统素材三级分类
 //新增设计产品/成品/系统素材三级分类
 export function shopTypeSave(params?: any) {
 export function shopTypeSave(params?: any) {
-    return request.post({ url: '/api/diy/template/type/create', params })
+  return request.post({ url: '/api/diy/template/type/create', params })
 }
 }
 
 
 //设计产品/成品/系统素材三级分类详情
 //设计产品/成品/系统素材三级分类详情
 export function shopTypeUpdate(params?: any) {
 export function shopTypeUpdate(params?: any) {
-    return request.post({ url: '/api/diy/template/type/update', params })
+  return request.post({ url: '/api/diy/template/type/update', params })
 }
 }
 //启用/禁用/删除设计产品/成品/系统素材三级分类
 //启用/禁用/删除设计产品/成品/系统素材三级分类
 export function shopTypeChangeStatus(params?: any) {
 export function shopTypeChangeStatus(params?: any) {
-    return request.post({ url: '/api/diy/template/type/delete', params })
+  return request.post({ url: '/api/diy/template/type/delete', params })
 }
 }
 
 
 // 分类首页/取消首页显示
 // 分类首页/取消首页显示
 export function shopTypeChangeTop(params?: any) {
 export function shopTypeChangeTop(params?: any) {
-    return request.post({ url: '/shop/type/changeTop', params })
+  return request.post({ url: '/shop/type/changeTop', params })
 }
 }
 
 
-
-
 //模板列表
 //模板列表
-export function foxpsdDiyTemplateListFindAndCountAll(params: Record<string, any>) {
-    return request.post({ url: '/api/diy/template/listFindAndCountAll', params })
+export function foxpsdDiyTemplateListFindAndCountAll(
+  params: Record<string, any>
+) {
+  return request.post({ url: '/api/diy/template/listFindAndCountAll', params })
 }
 }
 
 
-
 //foxpsd 模板详情
 //foxpsd 模板详情
 export function foxpsdDiyTemplateItem(params: Record<string, any>) {
 export function foxpsdDiyTemplateItem(params: Record<string, any>) {
-    return request.get({ url: '/foxpsdData/api/diy/template/item', params })
+  return request.get({ url: '/foxpsdData/api/diy/template/item', params })
 }
 }
 
 
 //默认绑定模板
 //默认绑定模板
 export function apiDiyTemplateBindDiy(params?: any) {
 export function apiDiyTemplateBindDiy(params?: any) {
-    return request.post({ url: '/api/diy/template/bind/diy', params })
+  return request.post({ url: '/api/diy/template/bind/diy', params })
 }
 }
 
 
 // 解绑模板
 // 解绑模板
 export function apiDiyTemplateUnbindDiy(params?: any) {
 export function apiDiyTemplateUnbindDiy(params?: any) {
-    return request.post({ url: '/api/diy/template/unbind/diy', params })
+  return request.post({ url: '/api/diy/template/unbind/diy', params })
 }
 }
 
 
-
 // 模板创建
 // 模板创建
 export function apiDiyTemplateCreate(params?: any) {
 export function apiDiyTemplateCreate(params?: any) {
-    return request.post({ url: '/api/diy/template/create', params })
+  return request.post({ url: '/api/diy/template/create', params })
 }
 }
 // 模板创建
 // 模板创建
 export function apiDiyTemplateUpdate(params?: any) {
 export function apiDiyTemplateUpdate(params?: any) {
-    return request.post({ url: '/api/diy/template/update', params })
+  return request.post({ url: '/api/diy/template/update', params })
 }
 }
 // 模板删除
 // 模板删除
 export function apiDiyTemplateDelete(params?: any) {
 export function apiDiyTemplateDelete(params?: any) {
-    return request.post({ url: '/api/diy/template/delete', params })
+  return request.post({ url: '/api/diy/template/delete', params })
 }
 }
 // 模板详情
 // 模板详情
 export function apiDiyTemplateItem(params?: any) {
 export function apiDiyTemplateItem(params?: any) {
-    return request.get({ url: '/api/diy/template/item', params })
+  return request.get({ url: '/api/diy/template/item', params })
 }
 }
 // 模板上下架
 // 模板上下架
 export function apiDiyTemplateStatus(params?: any) {
 export function apiDiyTemplateStatus(params?: any) {
-    return request.post({ url: '/api/diy/template/status', params })
+  return request.post({ url: '/api/diy/template/status', params })
 }
 }
 // 模板绑定用户
 // 模板绑定用户
 export function apiDiyTemplateBindUser(params?: any) {
 export function apiDiyTemplateBindUser(params?: any) {
-    return request.post({ url: '/api/diy/template/bind/user', params })
+  return request.post({ url: '/api/diy/template/bind/user', params })
 }
 }
 
 
 //层面列表
 //层面列表
 export function apiDiyTemplateFaceList(params?: any) {
 export function apiDiyTemplateFaceList(params?: any) {
-    return request.get({ url: '/api/diy/template/face/list', params })
+  return request.get({ url: '/api/diy/template/face/list', params })
 }
 }
 //层面创建
 //层面创建
 export function apiDiyTemplateFaceCreate(params?: any) {
 export function apiDiyTemplateFaceCreate(params?: any) {
-    return request.post({ url: '/api/diy/template/face/create', params })
+  return request.post({ url: '/api/diy/template/face/create', params })
 }
 }
 //层面更新
 //层面更新
 export function apiDiyTemplateFaceUpdate(params?: any) {
 export function apiDiyTemplateFaceUpdate(params?: any) {
-    return request.post({ url: '/api/diy/template/face/update', params })
+  return request.post({ url: '/api/diy/template/face/update', params })
 }
 }
 //层面删除
 //层面删除
 export function apiDiyTemplateFaceDelete(params?: any) {
 export function apiDiyTemplateFaceDelete(params?: any) {
-    return request.post({ url: '/api/diy/template/face/delete', params })
+  return request.post({ url: '/api/diy/template/face/delete', params })
 }
 }
 
 
 // 效果图
 // 效果图
 export function apiDiyTemplateXiaoguotuList(params?: any) {
 export function apiDiyTemplateXiaoguotuList(params?: any) {
-    return request.get({ url: '/api/diy/template/xiaoguotu/list', params })
+  return request.get({ url: '/api/diy/template/xiaoguotu/list', params })
 }
 }
 // 效果图
 // 效果图
 export function apiDiyTemplateXiaoguotuCreate(params?: any) {
 export function apiDiyTemplateXiaoguotuCreate(params?: any) {
-    return request.post({ url: '/api/diy/template/xiaoguotu/create', params })
+  return request.post({ url: '/api/diy/template/xiaoguotu/create', params })
 }
 }
 export function apiDiyTemplateXiaoguotuUpdate(params?: any) {
 export function apiDiyTemplateXiaoguotuUpdate(params?: any) {
-    return request.post({ url: '/api/diy/template/xiaoguotu/update', params })
+  return request.post({ url: '/api/diy/template/xiaoguotu/update', params })
 }
 }
 export function apiDiyTemplateXiaoguotuDelete(params?: any) {
 export function apiDiyTemplateXiaoguotuDelete(params?: any) {
-    return request.post({ url: '/api/diy/template/xiaoguotu/delete', params })
+  return request.post({ url: '/api/diy/template/xiaoguotu/delete', params })
 }
 }
 
 
 export function apiPsdParser(params?: any) {
 export function apiPsdParser(params?: any) {
-    return request.post({ url: '/api/psd/parser', params })
+  return request.post({ url: '/api/psd/parser', params })
 }
 }
 
 
 // 颜色
 // 颜色
 export function apiDiyTemplateColorList(params?: any) {
 export function apiDiyTemplateColorList(params?: any) {
-    return request.get({ url: '/api/diy/template/color/list', params })
+  return request.get({ url: '/api/diy/template/color/list', params })
 }
 }
 export function apiDiyTemplateColorCreate(params?: any) {
 export function apiDiyTemplateColorCreate(params?: any) {
-    return request.post({ url: '/api/diy/template/color/create', params })
+  return request.post({ url: '/api/diy/template/color/create', params })
 }
 }
 
 
 export function apiDiyTemplateColorUpdate(params?: any) {
 export function apiDiyTemplateColorUpdate(params?: any) {
-    return request.post({ url: '/api/diy/template/color/update', params })
+  return request.post({ url: '/api/diy/template/color/update', params })
 }
 }
 export function apiDiyTemplateColorDelete(params?: any) {
 export function apiDiyTemplateColorDelete(params?: any) {
-    return request.post({ url: '/api/diy/template/color/delete', params })
+  return request.post({ url: '/api/diy/template/color/delete', params })
 }
 }
 
 
 //尺码
 //尺码
 export function apiDiyTemplateChimaList(params?: any) {
 export function apiDiyTemplateChimaList(params?: any) {
-    return request.get({ url: '/api/diy/template/chima/list', params })
+  return request.get({ url: '/api/diy/template/chima/list', params })
 }
 }
 export function apiDiyTemplateChimaCreate(params?: any) {
 export function apiDiyTemplateChimaCreate(params?: any) {
-    return request.post({ url: '/api/diy/template/chima/create', params })
+  return request.post({ url: '/api/diy/template/chima/create', params })
 }
 }
 export function apiDiyTemplateChimaUpdate(params?: any) {
 export function apiDiyTemplateChimaUpdate(params?: any) {
-    return request.post({ url: '/api/diy/template/chima/update', params })
+  return request.post({ url: '/api/diy/template/chima/update', params })
 }
 }
 export function apiDiyTemplateChimaDelete(params?: any) {
 export function apiDiyTemplateChimaDelete(params?: any) {
-    return request.post({ url: '/api/diy/template/chima/delete', params })
+  return request.post({ url: '/api/diy/template/chima/delete', params })
 }
 }
-
-

src/views/product/lists/bindDiy.vue

@@ -65,7 +65,7 @@ import type { FormInstance } from 'element-plus'
 import {
 import {
   apiDiyTemplateUpdate,
   apiDiyTemplateUpdate,
   apiDiyTemplateCreate,
   apiDiyTemplateCreate,
-  apiDiyTemplateBindDiy,
+  apiDiyTemplateBindDiy
 } from '@/api/product'
 } from '@/api/product'
 import Popup from '@/components/popup/index.vue'
 import Popup from '@/components/popup/index.vue'
 import { getImageUrl } from '@/utils/getImgUrl'
 import { getImageUrl } from '@/utils/getImgUrl'
@@ -80,7 +80,7 @@ const mobanList: any = ref([])
 const formData = reactive({
 const formData = reactive({
   id: '',
   id: '',
   diy_ids: '', //待绑定的模板
   diy_ids: '', //待绑定的模板
-  default_diy_id: '',
+  default_diy_id: ''
 })
 })
 
 
 const formRules: any = reactive({
 const formRules: any = reactive({
@@ -88,9 +88,9 @@ const formRules: any = reactive({
     {
     {
       required: true,
       required: true,
       message: '请输入标签名称',
       message: '请输入标签名称',
-      trigger: 'blur',
-    },
-  ],
+      trigger: 'blur'
+    }
+  ]
 })
 })
 
 
 const templateChange = (e: any) => {
 const templateChange = (e: any) => {
@@ -150,6 +150,6 @@ const handleClose = () => {
 defineExpose({
 defineExpose({
   open,
   open,
   setFormData,
   setFormData,
-  getDetail,
+  getDetail
 })
 })
 </script>
 </script>

src/views/product/lists/edit.vue

 <template>
 <template>
-    <div class="edit-popup">
-        <popup ref="popupRef" :title="popupTitle" :async="true" width="700px" @confirm="handleSubmit" @close="handleClose">
-            <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
-                <el-form-item label="模板名称" prop="title">
-                    <el-input v-model="formData.title" placeholder="请输入模板名称" clearable />
-                </el-form-item>
-
-                <el-form-item label="产品主图" prop="img_url">
-                    <div>
-                        <div>
-                            <material-picker v-model="formData.img_url" :limit="1" />
-                        </div>
-                        <div class="form-tips">建议尺寸1000*1000px</div>
-                    </div>
-                </el-form-item>
-
-                <el-form-item label="分类" prop="type_id">
-                    <el-cascader v-model="formData.type_id" :options="type_list" :props="{ label: 'title', value: 'id' }" />
-                </el-form-item>
-
-                <el-form-item label="自定义编码" prop="bianma">
-                    <el-input v-model="formData.bianma" placeholder="请输入自定义编码" clearable />
-                    <div class=" text-xs">自定义编码会合成到生产图中（英文或数字）</div>
-                </el-form-item>
-
-                <el-form-item label="生产图格式" prop="sc_img_type">
-                    <div>
-                        <el-radio-group v-model="formData.sc_img_type">
-                            <el-radio :label="1">JPG</el-radio>
-                            <el-radio :label="2">SVG</el-radio>
-                            <el-radio :label="3">TIFF</el-radio>
-                        </el-radio-group>
-                        <div class=" text-xs">没特殊需求，请选择方法jpg及svg，其中svg性能最好</div>
-                    </div>
-                </el-form-item>
-
-                <el-form-item label="尺码图是否立即生成" prop="chima_now_render">
-                    <div>
-                        <el-radio-group v-model="formData.chima_now_render">
-                            <el-radio :label="0">后续生成</el-radio>
-                            <el-radio :label="1">立刻生成</el-radio>
-                        </el-radio-group>
-                        <div class=" text-xs">默认为【后续生成】，可以通过接口等用户下单后再去合成</div>
-                    </div>
-                </el-form-item>
-
-                <el-form-item label="排序" prop="idx">
-                    <div>
-                        <el-input-number v-model="formData.idx" :min="1" :max="9999" />
-                        <div class="form-tips">默认为1， 数值越小越排前</div>
-                    </div>
-                </el-form-item>
-
-                <el-form-item label="描述" prop="content">
-                    <el-input v-model="formData.content" placeholder="请输入描述" type="textarea"
-                        :autosize="{ minRows: 3, maxRows: 3 }" maxlength="200" show-word-limit clearable />
-                </el-form-item>
-
-
-            </el-form>
-        </popup>
-    </div>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      :title="popupTitle"
+      :async="true"
+      width="700px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        label-width="120px"
+        :rules="formRules"
+      >
+        <el-form-item label="模板名称" prop="title">
+          <el-input
+            v-model="formData.title"
+            placeholder="请输入模板名称"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="产品主图" prop="img_url">
+          <div>
+            <div>
+              <material-picker v-model="formData.img_url" :limit="1" />
+            </div>
+            <div class="form-tips">建议尺寸1000*1000px</div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="分类" prop="type_id">
+          <el-cascader
+            v-model="formData.type_id"
+            :options="type_list"
+            :props="{ label: 'title', value: 'id' }"
+          />
+        </el-form-item>
+
+        <el-form-item label="自定义编码" prop="bianma">
+          <el-input
+            v-model="formData.bianma"
+            placeholder="请输入自定义编码"
+            clearable
+          />
+          <div class="text-xs">自定义编码会合成到生产图中（英文或数字）</div>
+        </el-form-item>
+
+        <el-form-item label="生产图格式" prop="sc_img_type">
+          <div>
+            <el-radio-group v-model="formData.sc_img_type">
+              <el-radio :label="1">JPG</el-radio>
+              <el-radio :label="2">SVG</el-radio>
+              <el-radio :label="3">TIFF</el-radio>
+            </el-radio-group>
+            <div class="text-xs">
+              没特殊需求，请选择方法jpg及svg，其中svg性能最好
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="尺码图是否立即生成" prop="chima_now_render">
+          <div>
+            <el-radio-group v-model="formData.chima_now_render">
+              <el-radio :label="0">后续生成</el-radio>
+              <el-radio :label="1">立刻生成</el-radio>
+            </el-radio-group>
+            <div class="text-xs">
+              默认为【后续生成】，可以通过接口等用户下单后再去合成
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="idx">
+          <div>
+            <el-input-number v-model="formData.idx" :min="1" :max="9999" />
+            <div class="form-tips">默认为1， 数值越小越排前</div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="描述" prop="content">
+          <el-input
+            v-model="formData.content"
+            placeholder="请输入描述"
+            type="textarea"
+            :autosize="{ minRows: 3, maxRows: 3 }"
+            maxlength="200"
+            show-word-limit
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+    </popup>
+  </div>
 </template>
 </template>
 
 
-
 <script lang="ts" setup>
 <script lang="ts" setup>
-
 import type { FormInstance } from 'element-plus'
 import type { FormInstance } from 'element-plus'
-import { shopTypeList, apiDiyTemplateUpdate, apiDiyTemplateCreate } from '@/api/product'
+import {
+  shopTypeList,
+  apiDiyTemplateUpdate,
+  apiDiyTemplateCreate
+} from '@/api/product'
 import Popup from '@/components/popup/index.vue'
 import Popup from '@/components/popup/index.vue'
 
 
 const emit = defineEmits(['success', 'close'])
 const emit = defineEmits(['success', 'close'])
@@ -75,119 +110,116 @@ const formRef = shallowRef<FormInstance>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const mode = ref('add')
 const mode = ref('add')
 const popupTitle = computed(() => {
 const popupTitle = computed(() => {
-    return mode.value == 'edit' ? '编辑模板' : '新增模板'
+  return mode.value == 'edit' ? '编辑模板' : '新增模板'
 })
 })
 
 
 const formData = reactive({
 const formData = reactive({
-    id: '',
-    title: '',
-    idx: 1,
-    img_url: '',
-    type_id: '',
-    bianma: '',
-    content: '',
-    sc_img_type: 1, // 1 JPG 2 SVG
-    chima_now_render:0
+  id: '',
+  title: '',
+  idx: 1,
+  img_url: '',
+  type_id: '',
+  bianma: '',
+  content: '',
+  sc_img_type: 1, // 1 JPG 2 SVG
+  chima_now_render: 0
 })
 })
 
 
-
 const formRules: any = reactive({
 const formRules: any = reactive({
-    title: [
-        {
-            required: true,
-            message: '请输入标签名称',
-            trigger: 'blur'
-        }
-    ],
-    idx: [
-        {
-            required: true,
-            message: '请输入排序',
-            trigger: 'blur'
-        }
-    ],
-    img_url: [
-        {
-            required: true,
-            message: '主图',
-            trigger: 'blur'
-        }
-    ],
-    type_id: [
-        {
-            required: true,
-            message: '分类',
-            trigger: 'blur'
-        }
-    ],
-    bianma: [
-        {
-            required: true,
-            message: '自定义编码',
-            trigger: 'blur'
-        }
-    ],
-    sc_img_type: [
-        {
-            required: true,
-            message: '生产图输出格式',
-            trigger: 'blur'
-        }
-    ]
+  title: [
+    {
+      required: true,
+      message: '请输入标签名称',
+      trigger: 'blur'
+    }
+  ],
+  idx: [
+    {
+      required: true,
+      message: '请输入排序',
+      trigger: 'blur'
+    }
+  ],
+  img_url: [
+    {
+      required: true,
+      message: '主图',
+      trigger: 'blur'
+    }
+  ],
+  type_id: [
+    {
+      required: true,
+      message: '分类',
+      trigger: 'blur'
+    }
+  ],
+  bianma: [
+    {
+      required: true,
+      message: '自定义编码',
+      trigger: 'blur'
+    }
+  ],
+  sc_img_type: [
+    {
+      required: true,
+      message: '生产图输出格式',
+      trigger: 'blur'
+    }
+  ]
 })
 })
 
 
-
 const handleSubmit = async () => {
 const handleSubmit = async () => {
-    await formRef.value?.validate();
+  await formRef.value?.validate()
 
 
-    let obj: any = { ...toRaw(formData) };
-    if (obj.id === '') delete obj.id
+  const obj: any = { ...toRaw(formData) }
+  if (obj.id === '') delete obj.id
 
 
-    if (obj.type_id && obj.type_id.length > 0) {
-        obj.type_id = obj.type_id[obj.type_id.length - 1]
-    }
+  if (obj.type_id && obj.type_id.length > 0) {
+    obj.type_id = obj.type_id[obj.type_id.length - 1]
+  }
 
 
-    mode.value == 'edit' ? await apiDiyTemplateUpdate(obj) : await apiDiyTemplateCreate(obj)
-    popupRef.value?.close()
-    emit('success')
+  mode.value == 'edit'
+    ? await apiDiyTemplateUpdate(obj)
+    : await apiDiyTemplateCreate(obj)
+  popupRef.value?.close()
+  emit('success')
 }
 }
 
 
-
-const type_list = ref([]);
+const type_list = ref([])
 const getData = async () => {
 const getData = async () => {
-    let res = await shopTypeList()
-    console.log(res)
-    type_list.value = res.data.list;
+  const res = await shopTypeList()
+  console.log(res)
+  type_list.value = res.data.list
 }
 }
 
 
-
 const open = async (key = 'add') => {
 const open = async (key = 'add') => {
-    mode.value = key
-    popupRef.value?.open();
-    await getData()
+  mode.value = key
+  popupRef.value?.open()
+  await getData()
 }
 }
 
 
 const setFormData = (data: Record<any, any>) => {
 const setFormData = (data: Record<any, any>) => {
-    for (const key in formData) {
-        if (data[key] != null && data[key] != undefined) {
-            //@ts-ignore
-            formData[key] = data[key]
-        }
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key]
     }
     }
+  }
 }
 }
 
 
-
 const getDetail = async (row: Record<string, any>) => {
 const getDetail = async (row: Record<string, any>) => {
-    setFormData(row);
+  setFormData(row)
 }
 }
 
 
 const handleClose = () => {
 const handleClose = () => {
-    emit('close')
+  emit('close')
 }
 }
 
 
 defineExpose({
 defineExpose({
-    open,
-    setFormData,
-    getDetail
+  open,
+  setFormData,
+  getDetail
 })
 })
 </script>
 </script>

src/views/product/lists/index.vue

 <template>
 <template>
-    <div class="article-lists">
-        <el-card class="!border-none" shadow="never">
-            <el-form ref="formRef" class="mb-[-16px]" @submit.native.prevent :model="queryParams" :inline="true">
-                <el-form-item label="编号/标题">
-                    <el-input class="w-[280px]" v-model="queryParams.content" clearable @keyup.enter="resetPage" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="resetPage">查询</el-button>
-                    <el-button @click="resetParams">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-
-        <el-card class="!border-none mt-4" shadow="never">
-            <div class="flex justify-between">
-                <div class="flex mb-4">
-                    <el-button type="primary" @click="handleAdd">
-                        <template #icon>
-                            <icon name="el-icon-Plus" />
-                        </template>
-                        添加模板
-                    </el-button>
-                    <el-button @click="handleExpand"> 展开/折叠 </el-button>
+  <div class="article-lists">
+    <el-card class="!border-none" shadow="never">
+      <el-form
+        ref="formRef"
+        class="mb-[-16px]"
+        @submit.native.prevent
+        :model="queryParams"
+        :inline="true"
+      >
+        <el-form-item label="编号/标题">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.content"
+            clearable
+            @keyup.enter="resetPage"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="resetPage">查询</el-button>
+          <el-button @click="resetParams">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="!border-none mt-4" shadow="never">
+      <div class="flex justify-between">
+        <div class="flex mb-4">
+          <el-button type="primary" @click="handleAdd">
+            <template #icon>
+              <icon name="el-icon-Plus" />
+            </template>
+            添加模板
+          </el-button>
+          <el-button @click="handleExpand"> 展开/折叠 </el-button>
+        </div>
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+
+      <el-table
+        ref="tableRef"
+        class="mt20"
+        @selection-change="handleSelectionChange"
+        size="large"
+        v-loading="pager.loading"
+        :data="pager.lists"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        row-key="id"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="展开">
+          <template #default="{ row }">
+            <span v-if="row.children && row.children.length > 0"
+              >关联模板数： {{ row.children.length }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="SKU" width="180">
+          <template #default="{ row }">
+            <div class="two" v-copy="row.sku">
+              {{ row.sku }}
+              <icon
+                class="ml-2"
+                :size="14"
+                color="#38f"
+                name="el-icon-DocumentCopy"
+              />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="商品信息">
+          <template #default="{ row }">
+            <div class="flex relative">
+              <image-contain
+                v-if="row.img_url"
+                :src="getImageUrl(row.img_url, 200)"
+                :width="100"
+                :height="100"
+                :preview-src-list="[row.img_url]"
+                preview-teleported
+                fit="contain"
+              />
+              <div class="goodsInfo ml-4">
+                <div class="title">{{ row.title }}</div>
+
+                <div class="mt-2">
+                  <div class="flex">
+                    <div class="one">分类：</div>
+                    <div class="two">
+                      <span v-if="row.db_diy_type">{{
+                        row.db_diy_type.title
+                      }}</span>
+                    </div>
+                  </div>
                 </div>
                 </div>
-                <pagination v-model="pager" @change="getLists" />
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="编码" prop="bianma" min-width="40" />
+        <el-table-column label="排序" prop="idx" min-width="40" />
+
+        <el-table-column label="生产图生成格式">
+          <template #default="{ row }">
+            <el-tag v-if="row.sc_img_type == 1">JPG</el-tag>
+            <el-tag v-if="row.sc_img_type == 2">SVG</el-tag>
+            <el-tag v-if="row.sc_img_type == 3">TIFF</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="尺码图是否立即生成">
+          <template #default="{ row }">
+            <el-tag v-if="row.chima_now_render == 1">立刻生成</el-tag>
+            <el-tag v-else>后续生成</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="创建时间" prop="create_date" />
+
+        <el-table-column label="上下架">
+          <template #default="{ row }">
+            <el-switch
+              v-model="row.status"
+              :active-value="1"
+              :inactive-value="0"
+              @change="changeStatus($event as number, row.id)"
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="{ row }">
+            <div>
+              <el-button type="primary" link>
+                <router-link
+                  :to="{
+                    path: '/product/face',
+                    query: {
+                      did: row.id
+                    }
+                  }"
+                >
+                  创建层面
+                </router-link>
+              </el-button>
+            </div>
+
+            <div>
+              <el-button type="primary" link>
+                <router-link
+                  :to="{
+                    path: '/product/xiaoguotu',
+                    query: {
+                      did: row.id
+                    }
+                  }"
+                >
+                  创建效果图
+                </router-link>
+              </el-button>
             </div>
             </div>
 
 
-            <el-table ref="tableRef" class="mt20" @selection-change="handleSelectionChange" size="large" v-loading="pager.loading"
-                :data="pager.lists" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id">
-                <el-table-column type="selection" width="55" />
-                <el-table-column label="展开">
-                    <template #default="{ row }">
-                        <span v-if="row.children && row.children.length >0">关联模板数： {{ row.children.length }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="SKU" width="180">
-                    <template #default="{ row }">
-                        <div class="two" v-copy="row.sku">
-                            {{ row.sku }}
-                            <icon class="ml-2" :size="14" color="#38f" name="el-icon-DocumentCopy" />
-                        </div>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="商品信息">
-                    <template #default="{ row }">
-                        <div class="flex relative">
-                            <image-contain v-if="row.img_url" :src="getImageUrl(row.img_url, 200)" :width="100" :height="100"
-                                :preview-src-list="[row.img_url]" preview-teleported
-                                fit="contain" />
-                            <div class="goodsInfo ml-4">
-                                <div class="title">{{ row.title }}</div>
-
-                                <div class="mt-2">
-                                    <div class="flex">
-                                        <div class="one">分类：</div>
-                                        <div class="two">
-                                            <span v-if="row.db_diy_type">{{ row.db_diy_type.title}}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column label="编码" prop="bianma" min-width="40" />
-                <el-table-column label="排序" prop="idx" min-width="40" />
-
-                <el-table-column label="生产图生成格式">
-                    <template #default="{ row }">
-                        <el-tag v-if="row.sc_img_type==1">JPG</el-tag>
-                        <el-tag v-if="row.sc_img_type==2">SVG</el-tag>
-                        <el-tag v-if="row.sc_img_type==3">TIFF</el-tag>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="尺码图是否立即生成">
-                    <template #default="{ row }">
-                        <el-tag v-if="row.chima_now_render==1">立刻生成</el-tag>
-                        <el-tag v-else>后续生成</el-tag>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="创建时间" prop="create_date"/>
-
-                <el-table-column label="上下架">
-                    <template #default="{ row }">
-                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
-                            @change="changeStatus($event as number, row.id)" />
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="操作" width="120" fixed="right">
-                    <template #default="{ row }">
-                    
-                        <div>
-                            <el-button type="primary" link>
-                                <router-link :to="{
-                                    path: '/product/face',
-                                    query: {
-                                        did: row.id
-                                    }
-                                }">
-                                    创建层面
-                                </router-link>
-                            </el-button>
-                        </div>
-
-                        <div>
-                            <el-button type="primary" link>
-                                <router-link :to="{
-                                     path: '/product/xiaoguotu',
-                                    query: {
-                                        did: row.id
-                                    }
-                                }">
-                                    创建效果图
-                                </router-link>
-                            </el-button>
-                        </div>
-
-                        <div>
-                            <el-button type="primary" link>
-                                <router-link :to="{
-                                    path: '/product/chima',
-                                    query: {
-                                        did: row.id
-                                    }
-                                }">
-                                    创建尺码
-                                </router-link>
-                            </el-button>
-                        </div>
-
-
-                        <div class=" mt-3">
-                            <el-button type="primary" link @click="handleEdit(row)">
-                                编辑
-                            </el-button>
-                        </div>
-
-                        <div v-if="!row.parent_id">
-                            <el-button type="primary" link @click="handleEdit(row,'bindDiy')">
-                                绑定模板
-                            </el-button>
-                        </div>
-
-                        <div v-if="row.children && row.children.length>0">
-                            <el-button type="primary" link @click="unbindDiy(row)">
-                                解绑模板
-                            </el-button>
-                        </div>
-
-                        <div class="">
-                            <el-button type="danger" link @click="handleDelete(row.id)">
-                                删除
-                            </el-button>
-                        </div>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <div class="flex justify-end mt-4">
-                <pagination v-model="pager" @change="getLists" />
+            <div>
+              <el-button type="primary" link>
+                <router-link
+                  :to="{
+                    path: '/product/chima',
+                    query: {
+                      did: row.id
+                    }
+                  }"
+                >
+                  创建尺码
+                </router-link>
+              </el-button>
             </div>
             </div>
-        </el-card>
 
 
-        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
+            <div class="mt-3">
+              <el-button type="primary" link @click="handleEdit(row)">
+                编辑
+              </el-button>
+            </div>
+
+            <div v-if="!row.parent_id">
+              <el-button
+                type="primary"
+                link
+                @click="handleEdit(row, 'bindDiy')"
+              >
+                绑定模板
+              </el-button>
+            </div>
 
 
-        <bind-diy-popup ref="bindDiyRef" v-if="showEdit2" @success="getLists" @close="showEdit2 = false"  />
+            <div v-if="row.children && row.children.length > 0">
+              <el-button type="primary" link @click="unbindDiy(row)">
+                解绑模板
+              </el-button>
+            </div>
 
 
-    </div>
+            <div class="">
+              <el-button type="danger" link @click="handleDelete(row.id)">
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="flex justify-end mt-4">
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+    </el-card>
+
+    <edit-popup
+      v-if="showEdit"
+      ref="editRef"
+      @success="getLists"
+      @close="showEdit = false"
+    />
+
+    <bind-diy-popup
+      ref="bindDiyRef"
+      v-if="showEdit2"
+      @success="getLists"
+      @close="showEdit2 = false"
+    />
+  </div>
 </template>
 </template>
 <script lang="ts" setup name="productLists">
 <script lang="ts" setup name="productLists">
-import { 
-    foxpsdDiyTemplateListFindAndCountAll, 
-    apiDiyTemplateDelete,
-    apiDiyTemplateStatus,
-    apiDiyTemplateUnbindDiy
+import {
+  foxpsdDiyTemplateListFindAndCountAll,
+  apiDiyTemplateDelete,
+  apiDiyTemplateStatus,
+  apiDiyTemplateUnbindDiy
 } from '@/api/product'
 } from '@/api/product'
 import { usePaging } from '@/hooks/usePaging'
 import { usePaging } from '@/hooks/usePaging'
 import feedback from '@/utils/feedback'
 import feedback from '@/utils/feedback'
-import { getImageUrl } from "@/utils/getImgUrl";
-import BindDiyPopup from "./bindDiy.vue"
+import { getImageUrl } from '@/utils/getImgUrl'
+import BindDiyPopup from './bindDiy.vue'
 import EditPopup from './edit.vue'
 import EditPopup from './edit.vue'
 import type { ElTable } from 'element-plus'
 import type { ElTable } from 'element-plus'
 
 
-
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const bindDiyRef = shallowRef<InstanceType<typeof BindDiyPopup>>()
 const bindDiyRef = shallowRef<InstanceType<typeof BindDiyPopup>>()
 const showEdit = ref(false)
 const showEdit = ref(false)
@@ -195,154 +249,145 @@ let isExpand = false
 const tableRef = shallowRef<InstanceType<typeof ElTable>>()
 const tableRef = shallowRef<InstanceType<typeof ElTable>>()
 
 
 const queryParams = reactive({
 const queryParams = reactive({
-    content: '',
-    type: 'all',
-    have_all:0
+  content: '',
+  type: 'all',
+  have_all: 0
 })
 })
 
 
 const { pager, getLists, resetPage, resetParams } = usePaging({
 const { pager, getLists, resetPage, resetParams } = usePaging({
-    fetchFun: foxpsdDiyTemplateListFindAndCountAll,
-    params: queryParams
+  fetchFun: foxpsdDiyTemplateListFindAndCountAll,
+  params: queryParams
 })
 })
 
 
-
 const selectData = ref<any[]>([])
 const selectData = ref<any[]>([])
 const handleSelectionChange = (val: any[]) => {
 const handleSelectionChange = (val: any[]) => {
-    selectData.value = val.map(({ id }) => id)
+  selectData.value = val.map(({ id }) => id)
 }
 }
 
 
-
 const handleAdd = async () => {
 const handleAdd = async () => {
-    showEdit.value = true;
-    await nextTick();
-    editRef.value?.open('add');
+  showEdit.value = true
+  await nextTick()
+  editRef.value?.open('add')
 }
 }
 
 
-const handleEdit = async (data: any,key='edit') => {
-    if(key=='edit'){
-        showEdit.value = true;
-        await nextTick();
-        editRef.value?.open('edit');
-        editRef.value?.getDetail(data)
-    }else{
-        showEdit2.value = true;
-        await nextTick();
-        bindDiyRef.value?.open('edit');
-        bindDiyRef.value?.getDetail(data)
-    }
+const handleEdit = async (data: any, key = 'edit') => {
+  if (key == 'edit') {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.getDetail(data)
+  } else {
+    showEdit2.value = true
+    await nextTick()
+    bindDiyRef.value?.open('edit')
+    bindDiyRef.value?.getDetail(data)
+  }
 }
 }
 
 
-const unbindDiy = async (row:any)=>{
-    await feedback.confirm('确定要解绑吗？')
-    let res = await apiDiyTemplateUnbindDiy({
-        id:row.id
-    })
-    getLists()
+const unbindDiy = async (row: any) => {
+  await feedback.confirm('确定要解绑吗？')
+  const res = await apiDiyTemplateUnbindDiy({
+    id: row.id
+  })
+  getLists()
 }
 }
 
 
 //上下架
 //上下架
 const changeStatus = async (status: number, id: number) => {
 const changeStatus = async (status: number, id: number) => {
-    try {
-        await apiDiyTemplateStatus({ id, status })
-        getLists()
-    } catch (error) {
-        getLists()
-    }
+  try {
+    await apiDiyTemplateStatus({ id, status })
+    getLists()
+  } catch (error) {
+    getLists()
+  }
 }
 }
 
 
-
 const handleExpand = () => {
 const handleExpand = () => {
-    isExpand = !isExpand
-    toggleExpand(pager.lists, isExpand)
+  isExpand = !isExpand
+  toggleExpand(pager.lists, isExpand)
 }
 }
 
 
 const toggleExpand = (children: any[], unfold = true) => {
 const toggleExpand = (children: any[], unfold = true) => {
-    for (const key in children) {
-        tableRef.value?.toggleRowExpansion(children[key], unfold)
-        if (children[key].list) {
-            toggleExpand(children[key].list!, unfold)
-        }
+  for (const key in children) {
+    tableRef.value?.toggleRowExpansion(children[key], unfold)
+    if (children[key].list) {
+      toggleExpand(children[key].list!, unfold)
     }
     }
+  }
 }
 }
 
 
 const handleDelete = async (id: number) => {
 const handleDelete = async (id: number) => {
-    await feedback.confirm('确定要删除？')
-    await apiDiyTemplateDelete({ id})
-    getLists()
+  await feedback.confirm('确定要删除？')
+  await apiDiyTemplateDelete({ id })
+  getLists()
 }
 }
 
 
 onActivated(() => {
 onActivated(() => {
-    getLists()
+  getLists()
 })
 })
 
 
 onMounted(() => {
 onMounted(() => {
-    getLists()
+  getLists()
 })
 })
-
-
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .goodsInfo {
 .goodsInfo {
-    .title {
-        font-weight: bold;
-    }
-
+  .title {
+    font-weight: bold;
+  }
 }
 }
 
 
 :deep(.el-table__row--level-1) {
 :deep(.el-table__row--level-1) {
-    --el-table-tr-bg-color: var(--el-color-warning-light-9);
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
 }
 }
 
 
 .foxpsd_box {
 .foxpsd_box {
-    .zhutu_data {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-
-        .right_txt {
-            font-size: 16px;
-            font-weight: bold;
-            color: #333;
-
-            .ts {
-                color: #666;
-                font-weight: 400;
-            }
-        }
+  .zhutu_data {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    .right_txt {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+
+      .ts {
+        color: #666;
+        font-weight: 400;
+      }
     }
     }
+  }
 
 
-    .boy_detail {
-        margin-bottom: 20px;
-
-        .boy_biaoti {
-            font-size: 16px;
-            color: #38f;
-        }
-
-        .img_list {
-            display: flex;
-            flex-wrap: wrap;
+  .boy_detail {
+    margin-bottom: 20px;
 
 
-            .item_xiaoguo {
-                text-align: center;
-                font-size: 14px;
-                margin-bottom: 5px;
-                margin-right: 5px;
-            }
-        }
+    .boy_biaoti {
+      font-size: 16px;
+      color: #38f;
+    }
 
 
+    .img_list {
+      display: flex;
+      flex-wrap: wrap;
 
 
+      .item_xiaoguo {
+        text-align: center;
+        font-size: 14px;
+        margin-bottom: 5px;
+        margin-right: 5px;
+      }
     }
     }
-
+  }
 }
 }
 
 
 .nav_her_btn {
 .nav_her_btn {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    font-size: 18px;
-    color: #38f;
-    cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 18px;
+  color: #38f;
+  cursor: pointer;
 }
 }
-</style>
+</style>
\ No newline at end of file

src/views/product/xiaoguotu/edit.vue

 <template>
 <template>
-    <div class="edit-popup">
-        <popup ref="popupRef" :title="popupTitle" :async="true" width="1000px" @confirm="handleSubmit" @close="handleClose">
-            <el-form ref="formRef" :model="formData" label-width="140px" :rules="formRules">
-                <el-row :gutter="20">
-                    <el-col :span="14">
-                        <el-form-item label="名称" prop="title">
-                            <el-input v-model="formData.title" placeholder="请输入名称" clearable />
-                        </el-form-item>
-
-                        <el-form-item label="排序" prop="idx">
-                            <div>
-                                <el-input-number v-model="formData.idx" :min="1" :max="9999" />
-                                <div class="form-tips">默认为1， 数值越小越排前</div>
-                            </div>
-                        </el-form-item>
-
-                        <el-form-item label="颜色" prop="color_id">
-                            <el-select v-model="formData.color_id">
-                                <el-option value="">不绑定颜色</el-option>
-                                <el-option :label="item.title" :value="item.id" v-for="item in colorList" :key="item.id"/>
-                            </el-select>
-                        </el-form-item>
-
-
-                        <el-form-item class="!mb-0">
-                            <div>
-                                <upload :multiple="false" :action="`${config.baseUrl}/api/v1/upload`" @change="onChange"
-                                    @error="onError" type="psd" :saveFoxpsd="false" :show-progress="true">
-                                    <el-button :loading="uploadPsdLoading" type="primary">上传PSD文件</el-button>
-                                </upload>
-                                <div>上传时间较长，请耐心等待</div>
-                            </div>
-                        </el-form-item>
-
-                        <el-form-item label="PSD文件" prop="psd_url">
-                            <el-input v-model="formData.psd_url" placeholder="psd 文件路径" clearable disabled />
-                        </el-form-item>
-                    </el-col>
-
-                    <el-col :span="10">
-                        <el-form-item label="主图" prop="img_url">
-                            <div>
-                                <div>
-                                    <material-picker v-model="formData.img_url" :limit="1" />
-                                </div>
-                                <div class="text-xs">png,jpg,jpeg等格式，最大为100kb,750*750像素</div>
-                            </div>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </popup>
-    </div>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      :title="popupTitle"
+      :async="true"
+      width="1000px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        label-width="140px"
+        :rules="formRules"
+      >
+        <el-row :gutter="20">
+          <el-col :span="14">
+            <el-form-item label="名称" prop="title">
+              <el-input
+                v-model="formData.title"
+                placeholder="请输入名称"
+                clearable
+              />
+            </el-form-item>
+
+            <el-form-item label="排序" prop="idx">
+              <div>
+                <el-input-number v-model="formData.idx" :min="1" :max="9999" />
+                <div class="form-tips">默认为1， 数值越小越排前</div>
+              </div>
+            </el-form-item>
+
+            <el-form-item label="颜色" prop="color_id">
+              <el-select v-model="formData.color_id">
+                <el-option value="">不绑定颜色</el-option>
+                <el-option
+                  :label="item.title"
+                  :value="item.id"
+                  v-for="item in colorList"
+                  :key="item.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item class="!mb-0">
+              <div>
+                <upload
+                  :multiple="false"
+                  :action="`${config.baseUrl}/api/v1/upload`"
+                  @change="onChange"
+                  @error="onError"
+                  type="psd"
+                  :saveFoxpsd="false"
+                  :show-progress="true"
+                >
+                  <el-button :loading="uploadPsdLoading" type="primary"
+                    >上传PSD文件</el-button
+                  >
+                </upload>
+                <div>上传时间较长，请耐心等待</div>
+              </div>
+            </el-form-item>
+
+            <el-form-item label="PSD文件" prop="psd_url">
+              <el-input
+                v-model="formData.psd_url"
+                placeholder="psd 文件路径"
+                clearable
+                disabled
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="10">
+            <el-form-item label="主图" prop="img_url">
+              <div>
+                <div>
+                  <material-picker v-model="formData.img_url" :limit="1" />
+                </div>
+                <div class="text-xs">
+                  png,jpg,jpeg等格式，最大为100kb,750*750像素
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </popup>
+  </div>
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-
 import type { FormInstance } from 'element-plus'
 import type { FormInstance } from 'element-plus'
-import { 
-    apiDiyTemplateXiaoguotuUpdate, 
-    apiDiyTemplateXiaoguotuCreate, 
-    apiPsdParser, 
-    apiDiyTemplateColorList 
+import {
+  apiDiyTemplateXiaoguotuUpdate,
+  apiDiyTemplateXiaoguotuCreate,
+  apiPsdParser,
+  apiDiyTemplateColorList
 } from '@/api/product'
 } from '@/api/product'
 import Popup from '@/components/popup/index.vue'
 import Popup from '@/components/popup/index.vue'
 import config from '@/config'
 import config from '@/config'
 import feedback from '@/utils/feedback'
 import feedback from '@/utils/feedback'
 
 
-
 const emit = defineEmits(['success', 'close'])
 const emit = defineEmits(['success', 'close'])
 const formRef = shallowRef<FormInstance>()
 const formRef = shallowRef<FormInstance>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const mode = ref('add')
 const mode = ref('add')
 const popupTitle = computed(() => {
 const popupTitle = computed(() => {
-    return mode.value == 'edit' ? '编辑效果图' : '新增效果图'
+  return mode.value == 'edit' ? '编辑效果图' : '新增效果图'
 })
 })
-const route = useRoute();
+const route = useRoute()
 const uploadPsdLoading = ref(false)
 const uploadPsdLoading = ref(false)
 
 
 const formData = reactive({
 const formData = reactive({
-    id: '',
-    title: '',
-    idx: 1,
-    img_url: '',
-    psd_url: '',
-    psd_svg: '',
-    psd_txt: '',
-    color_id: '',
-    dpi: '',
-    width: '',
-    height: '',
-    diy_id: route.query.did
+  id: '',
+  title: '',
+  idx: 1,
+  img_url: '',
+  psd_url: '',
+  psd_svg: '',
+  psd_txt: '',
+  color_id: '',
+  dpi: '',
+  width: '',
+  height: '',
+  diy_id: route.query.did
 })
 })
 
 
 const formRules: any = reactive({
 const formRules: any = reactive({
-    title: [
-        {
-            required: true,
-            message: '请输入标签名称',
-            trigger: 'blur'
-        }
-    ],
-    idx: [
-        {
-            required: true,
-            message: '请输入排序',
-            trigger: 'blur'
-        }
-    ],
-    width: [
-        {
-            required: true,
-            message: '宽度',
-            trigger: 'blur'
-        }
-    ],
-    height: [
-        {
-            required: true,
-            message: '高度',
-            trigger: 'blur'
-        }
-    ],
-    img_url: [
-        {
-            required: true,
-            message: '主图',
-            trigger: 'blur'
-        }
-    ],
-    mask_url: [
-        {
-            required: true,
-            message: '蒙版图',
-            trigger: 'blur'
-        }
-    ]
+  title: [
+    {
+      required: true,
+      message: '请输入标签名称',
+      trigger: 'blur'
+    }
+  ],
+  idx: [
+    {
+      required: true,
+      message: '请输入排序',
+      trigger: 'blur'
+    }
+  ],
+  width: [
+    {
+      required: true,
+      message: '宽度',
+      trigger: 'blur'
+    }
+  ],
+  height: [
+    {
+      required: true,
+      message: '高度',
+      trigger: 'blur'
+    }
+  ],
+  img_url: [
+    {
+      required: true,
+      message: '主图',
+      trigger: 'blur'
+    }
+  ],
+  mask_url: [
+    {
+      required: true,
+      message: '蒙版图',
+      trigger: 'blur'
+    }
+  ]
 })
 })
 
 
 const onChange = async (e: any) => {
 const onChange = async (e: any) => {
-    console.log(e);
-    uploadPsdLoading.value = true;
-    let relativePath = e.response.data.relativePath;
-    let res = await apiPsdParser({
-        lianjie: relativePath,
-        upload: 'oss'
-    })
-
-    if (res.data.width > 1600 || res.data.height > 1600) {
-        feedback.msgError("psd 最大可上传1600*1600像素");
-        return
-    }
-
-    formData.img_url = res.data.img_url;
-    formData.psd_url = res.data.relativePath;
-    formData.psd_svg = res.data.svg;
-    formData.psd_txt = res.data.txt;
-    formData.dpi = res.data.dpi;
-    formData.width = res.data.width;
-    formData.height = res.data.height;
-
-    uploadPsdLoading.value = false;
+  console.log(e)
+  uploadPsdLoading.value = true
+  const relativePath = e.response.data.relativePath
+  const res = await apiPsdParser({
+    lianjie: relativePath,
+    upload: 'oss'
+  })
+
+  if (res.data.width > 1600 || res.data.height > 1600) {
+    feedback.msgError('psd 最大可上传1600*1600像素')
+    return
+  }
+
+  formData.img_url = res.data.img_url
+  formData.psd_url = res.data.relativePath
+  formData.psd_svg = res.data.svg
+  formData.psd_txt = res.data.txt
+  formData.dpi = res.data.dpi
+  formData.width = res.data.width
+  formData.height = res.data.height
+
+  uploadPsdLoading.value = false
 }
 }
 
 
-
 const onError = (e: any) => {
 const onError = (e: any) => {
-    console.log(e);
+  console.log(e)
 }
 }
 
 
-
 const handleSubmit = async () => {
 const handleSubmit = async () => {
-    await formRef.value?.validate();
+  await formRef.value?.validate()
 
 
-    let obj: any = { ...toRaw(formData) };
+  const obj: any = { ...toRaw(formData) }
 
 
-    if (obj.id === '') delete obj.id
-    if (obj.id) delete obj.diy_id
+  if (obj.id === '') delete obj.id
+  if (obj.id) delete obj.diy_id
 
 
-    mode.value == 'edit' ? await apiDiyTemplateXiaoguotuUpdate(obj) : await apiDiyTemplateXiaoguotuCreate(obj)
-    popupRef.value?.close()
-    emit('success')
+  mode.value == 'edit'
+    ? await apiDiyTemplateXiaoguotuUpdate(obj)
+    : await apiDiyTemplateXiaoguotuCreate(obj)
+  popupRef.value?.close()
+  emit('success')
 }
 }
 
 
-const colorList:any= ref([]);
+const colorList: any = ref([])
 const getData = async () => {
 const getData = async () => {
-    let res:any = await apiDiyTemplateColorList({
-        diy_id: route.query.did
-    })
-    colorList.value = res.data.list;
+  const res: any = await apiDiyTemplateColorList({
+    diy_id: route.query.did
+  })
+  colorList.value = res.data.list
 }
 }
 
 
-
 const open = async (key = 'add', pager: any) => {
 const open = async (key = 'add', pager: any) => {
-    mode.value = key
-    popupRef.value?.open();
-    await getData();
+  mode.value = key
+  popupRef.value?.open()
+  await getData()
 }
 }
 
 
 const setFormData = (data: Record<any, any>) => {
 const setFormData = (data: Record<any, any>) => {
-    for (const key in formData) {
-        if (data[key] != null && data[key] != undefined) {
-            //@ts-ignore
-            formData[key] = data[key]
-        }
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key]
     }
     }
+  }
 }
 }
 
 
-
 const getDetail = async (row: Record<string, any>) => {
 const getDetail = async (row: Record<string, any>) => {
-    setFormData(row);
+  setFormData(row)
 }
 }
 
 
 const handleClose = () => {
 const handleClose = () => {
-    emit('close')
+  emit('close')
 }
 }
 
 
 defineExpose({
 defineExpose({
-    open,
-    setFormData,
-    getDetail
+  open,
+  setFormData,
+  getDetail
 })
 })
 </script>
 </script>

src/views/product/xiaoguotu/index.vue

 <template>
 <template>
-    <div>
-        <el-card class="!border-none" shadow="never">
-            <el-page-header :content="$route.meta.title" @back="goBack" />
-        </el-card>
-
-
-        <el-card class="!border-none mt-2" shadow="never" v-loading="pager.loading" v-if="activeTab=='xiaoguotu'">
-
-            <el-tabs v-model="activeTab"  class=" bg-white" >
-                <el-tab-pane label="效果图" name="xiaoguotu"></el-tab-pane>
-                <el-tab-pane label="颜色" name="color"></el-tab-pane>
-            </el-tabs>
-
-
-            <div class="mb-4 mt-2">
-                <el-button type="primary" @click="handleAdd()">
-                    <template #icon>
-                        <icon name="el-icon-Plus" />
-                    </template>
-                    新增效果图
-                </el-button>
-            </div>
-
-            <div class="mt-2">
-                <el-table ref="tableRef" size="large" v-loading="pager.loading" :data="pager.lists" row-key="id"
-                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-                    <el-table-column label="ID" prop="id" />
-
-                    <el-table-column label="主图">
-                        <template #default="{ row }">
-                            <image-contain v-if="row.img_url" :src="getImageUrl(row.img_url, 200)" :width="80" :height="80"
-                                :preview-src-list="[row.img_url]" preview-teleported fit="contain" />
-                        </template>
-                    </el-table-column>
-
-                    <el-table-column label="名称" prop="title" min-width="120" />
-                    <el-table-column label="排序" prop="idx" />
-                    <el-table-column label="尺寸" min-width="120">
-                        <template #default="{ row }">
-                            <div>{{ row.width }} X {{ row.height }} 像素</div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="颜色" min-width="120">
-                        <template #default="{ row }">
-                            <div v-if="row.db_diy_color" >
-                                <div class="w-[20px] h-[20px]" :style="{background:row.db_diy_color.sezhi}"></div>
-                                <div>{{ row.db_diy_color.title }}</div>
-                            </div>
-                            <span v-else>未绑定</span>
-                        </template>
-                    </el-table-column>
-
-                    <el-table-column label="分辨率" min-width="120">
-                        <template #default="{ row }">
-                            <div>{{ row.dpi }} DPI</div>
-                        </template>
-                    </el-table-column>
-
-                    <el-table-column label="创建时间" prop="create_date" min-width="120" />
-                    <el-table-column label="操作" width="120" fixed="right">
-                        <template #default="{ row }">
-                            <el-button type="primary" link @click="handleEdit(row)">
-                                编辑
-                            </el-button>
-                            <el-button type="danger" link @click="handleDelete(row.id)">
-                                删除
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </el-card>
-
-        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
-
-
-        <ColorPage :activeTab="activeTab" v-if="activeTab=='color'" @on-change="(e)=>{activeTab=e}"/>
-    </div>
+  <div>
+    <el-card class="!border-none" shadow="never">
+      <el-page-header :content="$route.meta.title" @back="goBack" />
+    </el-card>
+
+    <el-card
+      class="!border-none mt-2"
+      shadow="never"
+      v-loading="pager.loading"
+      v-if="activeTab == 'xiaoguotu'"
+    >
+      <el-tabs v-model="activeTab" class="bg-white">
+        <el-tab-pane label="效果图" name="xiaoguotu"></el-tab-pane>
+        <el-tab-pane label="颜色" name="color"></el-tab-pane>
+      </el-tabs>
+
+      <div class="mb-4 mt-2">
+        <el-button type="primary" @click="handleAdd()">
+          <template #icon>
+            <icon name="el-icon-Plus" />
+          </template>
+          新增效果图
+        </el-button>
+      </div>
+
+      <div class="mt-2">
+        <el-table
+          ref="tableRef"
+          size="large"
+          v-loading="pager.loading"
+          :data="pager.lists"
+          row-key="id"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        >
+          <el-table-column label="ID" prop="id" />
+
+          <el-table-column label="主图">
+            <template #default="{ row }">
+              <image-contain
+                v-if="row.img_url"
+                :src="getImageUrl(row.img_url, 200)"
+                :width="80"
+                :height="80"
+                :preview-src-list="[row.img_url]"
+                preview-teleported
+                fit="contain"
+              />
+            </template>
+          </el-table-column>
+
+          <el-table-column label="名称" prop="title" min-width="120" />
+          <el-table-column label="排序" prop="idx" />
+          <el-table-column label="尺寸" min-width="120">
+            <template #default="{ row }">
+              <div>{{ row.width }} X {{ row.height }} 像素</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="颜色" min-width="120">
+            <template #default="{ row }">
+              <div v-if="row.db_diy_color">
+                <div
+                  class="w-[20px] h-[20px]"
+                  :style="{ background: row.db_diy_color.sezhi }"
+                ></div>
+                <div>{{ row.db_diy_color.title }}</div>
+              </div>
+              <span v-else>未绑定</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="分辨率" min-width="120">
+            <template #default="{ row }">
+              <div>{{ row.dpi }} DPI</div>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            label="创建时间"
+            prop="create_date"
+            min-width="120"
+          />
+          <el-table-column label="操作" width="120" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleEdit(row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link @click="handleDelete(row.id)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+
+    <edit-popup
+      v-if="showEdit"
+      ref="editRef"
+      @success="getLists"
+      @close="showEdit = false"
+    />
+
+    <ColorPage
+      :activeTab="activeTab"
+      v-if="activeTab == 'color'"
+      @on-change="
+        (e) => {
+          activeTab = e
+        }
+      "
+    />
+  </div>
 </template>
 </template>
 
 
-
 <script lang="ts" setup name="productFenlei">
 <script lang="ts" setup name="productFenlei">
-
-import { apiDiyTemplateXiaoguotuList, apiDiyTemplateXiaoguotuDelete } from '@/api/product'
+import {
+  apiDiyTemplateXiaoguotuList,
+  apiDiyTemplateXiaoguotuDelete
+} from '@/api/product'
 import { usePaging } from '@/hooks/usePaging'
 import { usePaging } from '@/hooks/usePaging'
 import feedback from '@/utils/feedback'
 import feedback from '@/utils/feedback'
 import EditPopup from './edit.vue'
 import EditPopup from './edit.vue'
 import type { ElTable } from 'element-plus'
 import type { ElTable } from 'element-plus'
 import useMultipleTabs from '@/hooks/useMultipleTabs'
 import useMultipleTabs from '@/hooks/useMultipleTabs'
-import { getImageUrl } from "@/utils/getImgUrl";
+import { getImageUrl } from '@/utils/getImgUrl'
 
 
-import ColorPage from "../color/index.vue";
+import ColorPage from '../color/index.vue'
 
 
 const { removeTab } = useMultipleTabs()
 const { removeTab } = useMultipleTabs()
-const route = useRoute();
-const router = useRouter();
-
+const route = useRoute()
+const router = useRouter()
 
 
 const goBack = () => {
 const goBack = () => {
-    removeTab();
-    router.go(-1);
+  removeTab()
+  router.go(-1)
 }
 }
 
 
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
@@ -109,40 +143,35 @@ const showEdit = ref(false)
 const activeTab = ref('xiaoguotu')
 const activeTab = ref('xiaoguotu')
 
 
 const paramsData: any = reactive({
 const paramsData: any = reactive({
-    diy_id: route.query.did
+  diy_id: route.query.did
 })
 })
 
 
-const { type } = defineProps(['type']);
-type && (paramsData.type = type);
-
+const { type } = defineProps(['type'])
+type && (paramsData.type = type)
 
 
 const { pager, getLists } = usePaging({
 const { pager, getLists } = usePaging({
-    fetchFun: apiDiyTemplateXiaoguotuList,
-    params: paramsData
+  fetchFun: apiDiyTemplateXiaoguotuList,
+  params: paramsData
 })
 })
 
 
-
 const handleAdd = async () => {
 const handleAdd = async () => {
-    showEdit.value = true;
-    await nextTick();
-    editRef.value?.open('add', pager);
+  showEdit.value = true
+  await nextTick()
+  editRef.value?.open('add', pager)
 }
 }
 
 
 const handleEdit = async (data: any) => {
 const handleEdit = async (data: any) => {
-    showEdit.value = true;
-    await nextTick();
-    editRef.value?.open('edit', pager);
-    editRef.value?.getDetail(data)
+  showEdit.value = true
+  await nextTick()
+  editRef.value?.open('edit', pager)
+  editRef.value?.getDetail(data)
 }
 }
 
 
 const handleDelete = async (id: number) => {
 const handleDelete = async (id: number) => {
-    await feedback.confirm('确定要删除？')
-    await apiDiyTemplateXiaoguotuDelete({ id })
-    getLists()
+  await feedback.confirm('确定要删除？')
+  await apiDiyTemplateXiaoguotuDelete({ id })
+  getLists()
 }
 }
 
 
-
-
 getLists()
 getLists()
-
 </script>
 </script>

src/views/user/setting.vue

 <!-- 个人资料 -->
 <!-- 个人资料 -->
 <template>
 <template>
-    <div class="user-setting">
-        <el-card class="!border-none" shadow="never">
-            <el-form ref="formRef" class="ls-form" :model="formData" :rules="rules" label-width="100px">
-
-
-                <el-form-item label="当前密码：" prop="password_3">
-                    <div class="w-80">
-                        <el-input v-model.trim="formData.password_3" placeholder="修改密码时必填, 不修改密码时留空" type="password"
-                            show-password />
-                    </div>
-                </el-form-item>
-
-                <el-form-item label="新的密码：" prop="password_1">
-                    <div class="w-80">
-                        <el-input v-model.trim="formData.password_1" placeholder="修改密码时必填, 不修改密码时留空" type="password"
-                            show-password />
-                    </div>
-                </el-form-item>
-
-                <el-form-item label="确定密码：" prop="password_2">
-                    <div class="w-80">
-                        <el-input v-model.trim="formData.password_2" placeholder="修改密码时必填, 不修改密码时留空" type="password"
-                            show-password />
-                    </div>
-                </el-form-item>
-            </el-form>
-        </el-card>
-        <footer-btns>
-            <el-button type="primary" @click="handleSubmit">保存</el-button>
-        </footer-btns>
-    </div>
+  <div class="user-setting">
+    <el-card class="!border-none" shadow="never">
+      <el-form
+        ref="formRef"
+        class="ls-form"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="当前密码：" prop="password_3">
+          <div class="w-80">
+            <el-input
+              v-model.trim="formData.password_3"
+              placeholder="修改密码时必填, 不修改密码时留空"
+              type="password"
+              show-password
+            />
+          </div>
+        </el-form-item>
+
+        <el-form-item label="新的密码：" prop="password_1">
+          <div class="w-80">
+            <el-input
+              v-model.trim="formData.password_1"
+              placeholder="修改密码时必填, 不修改密码时留空"
+              type="password"
+              show-password
+            />
+          </div>
+        </el-form-item>
+
+        <el-form-item label="确定密码：" prop="password_2">
+          <div class="w-80">
+            <el-input
+              v-model.trim="formData.password_2"
+              placeholder="修改密码时必填, 不修改密码时留空"
+              type="password"
+              show-password
+            />
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <footer-btns>
+      <el-button type="primary" @click="handleSubmit">保存</el-button>
+    </footer-btns>
+  </div>
 </template>
 </template>
 
 
 <script setup lang="ts" name="userSetting">
 <script setup lang="ts" name="userSetting">
@@ -42,81 +58,78 @@ const formRef = ref<FormInstance>()
 const userStore = useUserStore()
 const userStore = useUserStore()
 // 表单数据
 // 表单数据
 const formData = reactive({
 const formData = reactive({
-    password_3: '', // 当前密码
-    password_1: '', // 新的密码
-    password_2: '' // 确定密码
+  password_3: '', // 当前密码
+  password_1: '', // 新的密码
+  password_2: '' // 确定密码
 })
 })
 
 
 // 表单校验规则
 // 表单校验规则
 const rules = reactive<object>({
 const rules = reactive<object>({
-    password_1: [
-        {
-            required: true,
-            message: '请输入新的密码',
-            trigger: ['blur']
-        }
-    ],
-    password_2: [
-        {
-            required: true,
-            message: '请输入确定密码',
-            trigger: ['blur']
-        }
-    ],
-    password_3: [
-        {
-            required: true,
-            message: '请输入当前密码',
-            trigger: ['blur']
-        }
-    ]
+  password_1: [
+    {
+      required: true,
+      message: '请输入新的密码',
+      trigger: ['blur']
+    }
+  ],
+  password_2: [
+    {
+      required: true,
+      message: '请输入确定密码',
+      trigger: ['blur']
+    }
+  ],
+  password_3: [
+    {
+      required: true,
+      message: '请输入当前密码',
+      trigger: ['blur']
+    }
+  ]
 })
 })
 
 
-
 // 设置个人设置
 // 设置个人设置
 const setUser = async () => {
 const setUser = async () => {
+  if (formData.password_3 || formData.password_1 || formData.password_2) {
+    if (!formData.password_3) {
+      return feedback.msgError('请输入当前密码')
+    }
 
 
-    if (formData.password_3 || formData.password_1 || formData.password_2) {
-        if (!formData.password_3) {
-            return feedback.msgError('请输入当前密码')
-        }
-
-        if (!formData.password_1) {
-            return feedback.msgError('请输入新的密码')
-        }
+    if (!formData.password_1) {
+      return feedback.msgError('请输入新的密码')
+    }
 
 
-        if (!formData.password_2) {
-            return feedback.msgError('请输入确定密码')
-        }
+    if (!formData.password_2) {
+      return feedback.msgError('请输入确定密码')
+    }
 
 
-        if (formData.password_1 != formData.password_2) {
-            return feedback.msgError('两次输入的密码不一样')
-        }
+    if (formData.password_1 != formData.password_2) {
+      return feedback.msgError('两次输入的密码不一样')
     }
     }
+  }
 
 
-    if (formData.password_3 && formData.password_1 && formData.password_2) {
-        if (formData.password_3.length < 6 || formData.password_3.length > 32) {
-            return feedback.msgError('密码长度在6到32之间')
-        }
-        if (formData.password_1.length < 6 || formData.password_1.length > 32) {
-            return feedback.msgError('密码长度在6到32之间')
-        }
-        if (formData.password_2.length < 6 || formData.password_2.length > 32) {
-            return feedback.msgError('密码长度在6到32之间')
-        }
+  if (formData.password_3 && formData.password_1 && formData.password_2) {
+    if (formData.password_3.length < 6 || formData.password_3.length > 32) {
+      return feedback.msgError('密码长度在6到32之间')
     }
     }
+    if (formData.password_1.length < 6 || formData.password_1.length > 32) {
+      return feedback.msgError('密码长度在6到32之间')
+    }
+    if (formData.password_2.length < 6 || formData.password_2.length > 32) {
+      return feedback.msgError('密码长度在6到32之间')
+    }
+  }
 
 
-    await setUserInfo(formData)
-    feedback.msgSuccess("操作成功");
-    userStore.getUserInfo();
+  await setUserInfo(formData)
+  feedback.msgSuccess('操作成功')
+  userStore.getUserInfo()
 }
 }
 
 
 // 提交数据
 // 提交数据
 const handleSubmit = async () => {
 const handleSubmit = async () => {
-    await formRef.value?.validate()
-    setUser()
+  await formRef.value?.validate()
+  setUser()
 }
 }
-
 </script>
 </script>
 
 
 <style lang="scss" scoped></style>
 <style lang="scss" scoped></style>

src/views/userSave/item/index.vue

 <template>
 <template>
-    <div>
-        <el-card class="!border-none" shadow="never">
-            <el-page-header :content="$route.meta.title" @back="goBack" />
-        </el-card>
-        <template v-if="data">
-            <el-card class="!border-none mt-2" shadow="never">
-                <el-descriptions class="margin-top" :title="data.sku + ' ' + data.db_diy.title" :column="3" :border="true">
-
-                    <template #extra>
-                        <div class="flex">
-                            <div>
-                                <el-tag size="large" type="warning" v-if="data.xgt_status == 9">效果图待生成</el-tag>
-                                <el-tag size="large" type="success" v-else-if="data.xgt_status == 1">效果图已生成</el-tag>
-                                <el-tag size="large" type="danger" v-else>效果图失败</el-tag>
-                            </div>
-
-                            <div class="ml-3">
-                                <el-tag size="large" type="warning" v-if="data.status == 9">总待生成</el-tag>
-                                <el-tag size="large" type="success" v-else-if="data.status == 1">总已生成</el-tag>
-                                <el-tag size="large" type="danger" v-else>总失败</el-tag>
-                            </div>
-                        </div>
-                    </template>
-
-
-                    <el-descriptions-item label="SKU">{{ data.sku }}</el-descriptions-item>
-                    <el-descriptions-item label="自定义编码">{{ data.bianma }}</el-descriptions-item>
-                    <el-descriptions-item label="模板SKU">{{ data.db_diy.sku }}</el-descriptions-item>
-
-                    <el-descriptions-item label="用户昵称">{{ data.db_diy_user.name }}</el-descriptions-item>
-                    <el-descriptions-item label="用户SKU">{{ data.db_diy_user.sku }}</el-descriptions-item>
-
-                    <el-descriptions-item label="回调地址">{{ data.callback }}</el-descriptions-item>
-                    <el-descriptions-item label="创建时间">{{ data.create_date }}</el-descriptions-item>
-                    <el-descriptions-item label="效果图完成时间">{{ data.xgt_update_date }}</el-descriptions-item>
-                    <el-descriptions-item label="总完成时间">{{ data.update_date }}</el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-
-            <el-card class="!border-none mt-2" shadow="never">
-                <div class=" font-bold">用户设计图</div>
-                <div class="mt-2">
-                    <image-contain v-for="item in data.face_list" :src="getImageUrl(item.img_url || morenImg, 100)"
-                        :width="80" :height="80" :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
-                        preview-teleported fit="contain" />
-                </div>
-            </el-card>
-
-            <el-card class="!border-none mt-2" shadow="never">
-                <div class=" font-bold">效果图</div>
-                <div class="mt-4">
-                    <image-contain v-for="item in data.xiaoguotu_list" :src="getImageUrl(item.img_url || morenImg, 100)"
-                        :width="80" :height="80" :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
-                        preview-teleported fit="contain" />
-                </div>
-            </el-card>
-
-            <el-card class="!border-none mt-2" shadow="never">
-                <div class=" font-bold">尺码图</div>
-                <div class="flex mt-4">
-                    <el-table class="mt-4" size="large" :data="data.chima_list">
-                        <el-table-column label="标题" prop="title"></el-table-column>
-                        <el-table-column label="编码" prop="title"></el-table-column>
-                        <el-table-column label="文件路径">
-                            <template #default="{ row }">
-                                <el-button link type="primary" v-if="row.img_url">
-                                    <a :href="getImageUrl(row.img_url)" target="_blank">{{row.img_url}}</a>
-                                </el-button>
-                                <div v-else>未生成</div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="文件路径">
-                            <template #default="{ row }">
-                                <el-button link type="primary" v-if="row.img_url">
-                                    <a :href="getImageUrl(row.img_url)" target="_blank">下载</a>
-                                </el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-            </el-card>
-        </template>
-    </div>
+  <div>
+    <el-card class="!border-none" shadow="never">
+      <el-page-header :content="$route.meta.title" @back="goBack" />
+    </el-card>
+    <template v-if="data">
+      <el-card class="!border-none mt-2" shadow="never">
+        <el-descriptions
+          class="margin-top"
+          :title="data.sku + ' ' + data.db_diy.title"
+          :column="3"
+          :border="true"
+        >
+          <template #extra>
+            <div class="flex">
+              <div>
+                <el-tag size="large" type="warning" v-if="data.xgt_status == 9"
+                  >效果图待生成</el-tag
+                >
+                <el-tag
+                  size="large"
+                  type="success"
+                  v-else-if="data.xgt_status == 1"
+                  >效果图已生成</el-tag
+                >
+                <el-tag size="large" type="danger" v-else>效果图失败</el-tag>
+              </div>
+
+              <div class="ml-3">
+                <el-tag size="large" type="warning" v-if="data.status == 9"
+                  >总待生成</el-tag
+                >
+                <el-tag size="large" type="success" v-else-if="data.status == 1"
+                  >总已生成</el-tag
+                >
+                <el-tag size="large" type="danger" v-else>总失败</el-tag>
+              </div>
+            </div>
+          </template>
+
+          <el-descriptions-item label="SKU">{{
+            data.sku
+          }}</el-descriptions-item>
+          <el-descriptions-item label="自定义编码">{{
+            data.bianma
+          }}</el-descriptions-item>
+          <el-descriptions-item label="模板SKU">{{
+            data.db_diy.sku
+          }}</el-descriptions-item>
+
+          <el-descriptions-item label="用户昵称">{{
+            data.db_diy_user.name
+          }}</el-descriptions-item>
+          <el-descriptions-item label="用户SKU">{{
+            data.db_diy_user.sku
+          }}</el-descriptions-item>
+
+          <el-descriptions-item label="回调地址">{{
+            data.callback
+          }}</el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{
+            data.create_date
+          }}</el-descriptions-item>
+          <el-descriptions-item label="效果图完成时间">{{
+            data.xgt_update_date
+          }}</el-descriptions-item>
+          <el-descriptions-item label="总完成时间">{{
+            data.update_date
+          }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card class="!border-none mt-2" shadow="never">
+        <div class="font-bold">用户设计图</div>
+        <div class="mt-2">
+          <image-contain
+            v-for="(item,index) in data.face_list"
+            :key="index"
+            :src="getImageUrl(item.img_url || morenImg, 100)"
+            :width="80"
+            :height="80"
+            :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
+            preview-teleported
+            fit="contain"
+          />
+        </div>
+      </el-card>
+
+      <el-card class="!border-none mt-2" shadow="never">
+        <div class="font-bold">效果图</div>
+        <div class="mt-4">
+          <image-contain
+            v-for="(item,i) in data.xiaoguotu_list"
+            :key="i"
+            :src="getImageUrl(item.img_url || morenImg, 100)"
+            :width="80"
+            :height="80"
+            :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
+            preview-teleported
+            fit="contain"
+          />
+        </div>
+      </el-card>
+
+      <el-card class="!border-none mt-2" shadow="never">
+        <div class="font-bold">尺码图</div>
+        <div class="flex mt-4">
+          <el-table class="mt-4" size="large" :data="data.chima_list">
+            <el-table-column label="标题" prop="title"></el-table-column>
+            <el-table-column label="编码" prop="title"></el-table-column>
+            <el-table-column label="文件路径">
+              <template #default="{ row }">
+                <el-button link type="primary" v-if="row.img_url">
+                  <a :href="getImageUrl(row.img_url)" target="_blank">{{
+                    row.img_url
+                  }}</a>
+                </el-button>
+                <div v-else>未生成</div>
+              </template>
+            </el-table-column>
+            <el-table-column label="文件路径">
+              <template #default="{ row }">
+                <el-button link type="primary" v-if="row.img_url">
+                  <a :href="getImageUrl(row.img_url)" target="_blank">下载</a>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-card>
+    </template>
+  </div>
 </template>
 </template>
 
 
-
 <script lang="ts" setup name="productFenlei">
 <script lang="ts" setup name="productFenlei">
 import type { ElTable } from 'element-plus'
 import type { ElTable } from 'element-plus'
 import useMultipleTabs from '@/hooks/useMultipleTabs'
 import useMultipleTabs from '@/hooks/useMultipleTabs'
-import { getImageUrl } from "@/utils/getImgUrl";
-import { apiDiyUserSaveItem } from "@/api/member"
-const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg';
+import { getImageUrl } from '@/utils/getImgUrl'
+import { apiDiyUserSaveItem } from '@/api/member'
+const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg'
 
 
 const { removeTab } = useMultipleTabs()
 const { removeTab } = useMultipleTabs()
 
 
-const router = useRouter();
-const route = useRoute();
+const router = useRouter()
+const route = useRoute()
 
 
 const goBack = () => {
 const goBack = () => {
-    removeTab();
-    router.go(-1);
+  removeTab()
+  router.go(-1)
 }
 }
 
 
-const data = ref();
+const data = ref()
 const getData = async () => {
 const getData = async () => {
-    let res: any = await apiDiyUserSaveItem({ sku: route.query.sku })
-    data.value = res.data;
+  const res: any = await apiDiyUserSaveItem({ sku: route.query.sku })
+  data.value = res.data
 }
 }
 
 
-
 const getHouzhui = (url: string): boolean => {
 const getHouzhui = (url: string): boolean => {
-    if (/\.(svg|tiff)$/.test(url)) {
-        return true
-    } else {
-        return false
-    }
+  if (/\.(svg|tiff)$/.test(url)) {
+    return true
+  } else {
+    return false
+  }
 }
 }
 
 
 onActivated(() => {
 onActivated(() => {
-    getData();
+  getData()
 })
 })
 
 
 onMounted(() => {
 onMounted(() => {
-    getData();
+  getData()
 })
 })
-
-
-
 </script>
 </script>

src/views/userSave/lists/index.vue

 <template>
 <template>
-    <div class="article-lists">
-        <el-card class="!border-none" shadow="never">
-            <el-form ref="formRef" class="mb-[-16px]" @submit.native.prevent :model="queryParams" :inline="true">
-                <el-form-item label="编号/标题">
-                    <el-input class="w-[280px]" v-model="queryParams.content" clearable @keyup.enter="resetPage" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="resetPage">查询</el-button>
-                    <el-button @click="resetParams">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-
-        <el-card class="!border-none mt-4" shadow="never">
-            <div class="flex justify-between">
-                <div class="flex mb-4">
-                    <el-button type="primary" @click="downUserSave(selectData.join(','))" :disabled="selectData.length>0?false:true">批量下载</el-button>
-                    <el-button type="danger" @click="handleDelete(selectData.join(','))" :disabled="selectData.length>0?false:true">批量删除</el-button>
-                </div>
-                <pagination v-model="pager" @change="getLists" />
+  <div class="article-lists">
+    <el-card class="!border-none" shadow="never">
+      <el-form
+        ref="formRef"
+        class="mb-[-16px]"
+        @submit.native.prevent
+        :model="queryParams"
+        :inline="true"
+      >
+        <el-form-item label="编号/标题">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.content"
+            clearable
+            @keyup.enter="resetPage"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="resetPage">查询</el-button>
+          <el-button @click="resetParams">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="!border-none mt-4" shadow="never">
+      <div class="flex justify-between">
+        <div class="flex mb-4">
+          <el-button
+            type="primary"
+            @click="downUserSave(selectData.join(','))"
+            :disabled="selectData.length > 0 ? false : true"
+            >批量下载</el-button
+          >
+          <el-button
+            type="danger"
+            @click="handleDelete(selectData.join(','))"
+            :disabled="selectData.length > 0 ? false : true"
+            >批量删除</el-button
+          >
+        </div>
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+
+      <el-table
+        class="mt-4"
+        @selection-change="handleSelectionChange"
+        size="large"
+        v-loading="pager.loading"
+        :data="pager.lists"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="SKU" width="200">
+          <template #default="{ row }">
+            <div>
+              <div>
+                <router-link :to="`/userSave/lists/item?sku=${row.sku}`">
+                  <el-button link type="primary">{{ row.sku }}</el-button>
+                </router-link>
+              </div>
+              <div v-copy="row.sku" class="flex items-center">
+                <el-button link type="primary">复制</el-button>
+                <icon
+                  class="ml-2"
+                  :size="14"
+                  color="#38f"
+                  name="el-icon-DocumentCopy"
+                />
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="基础信息" width="150">
+          <template #default="{ row }">
+            <div v-if="row.db_diy">模板标题：{{ row.db_diy.title }}</div>
+            <div>自定义编码：{{ row.bianma }}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="用户设计图" min-width="150">
+          <template #default="{ row }">
+            <div
+              class="flex flex-wrap relative"
+              v-if="row.face_list.length > 0"
+            >
+              <image-contain
+                v-for="(item, index) in row.face_list"
+                :key="index"
+                :src="getImageUrl(item.img_url || morenImg, 100)"
+                :width="50"
+                :height="50"
+                :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
+                preview-teleported
+                fit="contain"
+                class="mr-2 mb-2"
+              />
+            </div>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="效果图" min-width="150">
+          <template #default="{ row }">
+            <div
+              class="flex flex-wrap relative"
+              v-if="row.xiaoguotu_list.length > 0"
+            >
+              <image-contain
+                v-for="(item, index) in row.xiaoguotu_list"
+                :key="index"
+                :src="getImageUrl(item.img_url || morenImg, 100)"
+                :width="50"
+                :height="50"
+                :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
+                preview-teleported
+                fit="contain"
+                class="mr-2 mb-2"
+              />
+            </div>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="尺码图" min-width="150">
+          <template #default="{ row }">
+            <div class="flex relative" v-if="row.chima_list.length > 0">
+              <router-link :to="`/userSave/lists/item?sku=${row.sku}`">
+                <el-button type="primary" link> 点击查看 </el-button>
+              </router-link>
+            </div>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="效果图状态">
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.xgt_status == 1">已生成</el-tag>
+            <el-tag type="warning" v-else-if="row.xgt_status == 9"
+              >待生成</el-tag
+            >
+            <el-tag type="danger" v-else>失败</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="总状态">
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.status == 1">已生成</el-tag>
+            <el-tag type="warning" v-else-if="row.status == 9">待生成</el-tag>
+            <el-tag type="danger" v-else>失败</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="时间" width="180">
+          <template #default="{ row }">
+            <div>
+              创建时间：
+              <div>{{ row.create_date }}</div>
+            </div>
+            <div>
+              效果图完成时间：
+              <div>{{ row.xgt_update_date }}</div>
+            </div>
+            <div>
+              总完成时间：
+              <div>{{ row.update_date }}</div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <div class="">
+              <router-link :to="`/userSave/lists/item?sku=${row.sku}`">
+                <el-button type="primary" link> 详情 </el-button>
+              </router-link>
             </div>
             </div>
 
 
-            <el-table class="mt-4" @selection-change="handleSelectionChange" size="large" v-loading="pager.loading"
-                :data="pager.lists">
-                <el-table-column type="selection" width="55" />
-                <el-table-column label="SKU" width="200">
-                    <template #default="{ row }">
-                        <div>
-                            <div>
-                                <router-link :to="`/userSave/lists/item?sku=${row.sku}`">
-                                    <el-button link type="primary">{{ row.sku }}</el-button>
-                                </router-link>
-                            </div>
-                            <div v-copy="row.sku" class="flex items-center">
-                                <el-button link type="primary">复制</el-button>
-                                <icon class="ml-2" :size="14" color="#38f" name="el-icon-DocumentCopy" />
-                            </div>
-                        </div>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="基础信息" width="150" >
-                    <template #default="{ row }">
-                        <div v-if="row.db_diy">模板标题：{{ row.db_diy.title }}</div>
-                        <div>自定义编码：{{row.bianma}}</div>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="用户设计图" min-width="150">
-                    <template #default="{ row }">
-                        <div class="flex flex-wrap relative" v-if="row.face_list.length > 0">
-                            <image-contain v-for="item in row.face_list" :src="getImageUrl(item.img_url || morenImg, 100)"
-                                :width="50" :height="50" :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
-                                preview-teleported fit="contain" class="mr-2 mb-2"/>
-                        </div>
-                        <div v-else>-</div>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="效果图" min-width="150">
-                    <template #default="{ row }">
-                        <div class="flex flex-wrap relative" v-if="row.xiaoguotu_list.length > 0">
-                            <image-contain v-for="item in row.xiaoguotu_list"
-                                :src="getImageUrl(item.img_url || morenImg, 100)" :width="50" :height="50"
-                                :preview-src-list="[getImageUrl(item.img_url || morenImg)]" preview-teleported
-                                fit="contain" class="mr-2 mb-2"/>
-                        </div>
-                        <div v-else>-</div>
-                    </template>
-                </el-table-column>
-
-
-                <el-table-column label="尺码图" min-width="150">
-                    <template #default="{ row }">
-                        <div class="flex relative" v-if="row.chima_list.length > 0">
-                            <router-link :to="`/userSave/lists/item?sku=${row.sku}`">
-                                <el-button type="primary" link>
-                                    点击查看
-                                </el-button>
-                            </router-link>
-                        </div>
-                        <div v-else>-</div>
-                    </template>
-                </el-table-column>
-
-
-                <el-table-column label="效果图状态">
-                    <template #default="{ row }">
-                        <el-tag type="success" v-if="row.xgt_status == 1">已生成</el-tag>
-                        <el-tag type="warning" v-else-if="row.xgt_status == 9">待生成</el-tag>
-                        <el-tag type="danger" v-else>失败</el-tag>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="总状态">
-                    <template #default="{ row }">
-                        <el-tag type="success" v-if="row.status == 1">已生成</el-tag>
-                        <el-tag type="warning" v-else-if="row.status == 9">待生成</el-tag>
-                        <el-tag type="danger" v-else>失败</el-tag>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="时间" width="180">
-                    <template #default="{ row }">
-                        <div>创建时间：<div>{{ row.create_date }}</div></div>
-                        <div>效果图完成时间：<div>{{ row.xgt_update_date }}</div></div>
-                        <div>总完成时间：<div>{{ row.update_date }}</div></div>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="操作" width="160" fixed="right">
-                    <template #default="{ row }">
-                        <div class="">
-                            <router-link :to="`/userSave/lists/item?sku=${row.sku}`">
-                                <el-button type="primary" link>
-                                    详情
-                                </el-button>
-                            </router-link>
-                        </div>
-
-                        <div class="">
-                            <el-button type="primary" link @click="handleAdd(row)">
-                                重新生成指定尺码
-                            </el-button>
-                        </div>
-
-                        <div class="mt-1">
-                            <el-button type="danger" link @click="handleDelete(row.sku)">
-                                删除
-                            </el-button>
-                        </div>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <div class="flex justify-end mt-4">
-                <pagination v-model="pager" @change="getLists" />
+            <div class="">
+              <el-button type="primary" link @click="handleAdd(row)">
+                重新生成指定尺码
+              </el-button>
             </div>
             </div>
-        </el-card>
 
 
-        <RenderChima v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
-    </div>
+            <div class="mt-1">
+              <el-button type="danger" link @click="handleDelete(row.sku)">
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="flex justify-end mt-4">
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+    </el-card>
+
+    <RenderChima
+      v-if="showEdit"
+      ref="editRef"
+      @success="getLists"
+      @close="showEdit = false"
+    />
+  </div>
 </template>
 </template>
 <script lang="ts" setup name="productLists">
 <script lang="ts" setup name="productLists">
-import { apiDiyUserSaveList, apiDiyUserSaveDelete,apiDiyUserDownCreate} from "@/api/member"
+import {
+  apiDiyUserSaveList,
+  apiDiyUserSaveDelete,
+  apiDiyUserDownCreate
+} from '@/api/member'
 import { usePaging } from '@/hooks/usePaging'
 import { usePaging } from '@/hooks/usePaging'
 import feedback from '@/utils/feedback'
 import feedback from '@/utils/feedback'
-import { getImageUrl } from "@/utils/getImgUrl";
-import RenderChima from "./renderChima.vue"
+import { getImageUrl } from '@/utils/getImgUrl'
+import RenderChima from './renderChima.vue'
 
 
 const showEdit = ref(false)
 const showEdit = ref(false)
 const editRef = shallowRef<InstanceType<typeof RenderChima>>()
 const editRef = shallowRef<InstanceType<typeof RenderChima>>()
 
 
-const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg';
+const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg'
 const queryParams = reactive({
 const queryParams = reactive({
-    content: '',
+  content: ''
 })
 })
 
 
 const { pager, getLists, resetPage, resetParams } = usePaging({
 const { pager, getLists, resetPage, resetParams } = usePaging({
-    fetchFun: apiDiyUserSaveList,
-    params: queryParams
+  fetchFun: apiDiyUserSaveList,
+  params: queryParams
 })
 })
 
 
 const selectData = ref<any[]>([])
 const selectData = ref<any[]>([])
 const handleSelectionChange = (val: any[]) => {
 const handleSelectionChange = (val: any[]) => {
-    selectData.value = val.map(({ sku }) => sku)
+  selectData.value = val.map(({ sku }) => sku)
 }
 }
 
 
-const downUserSave =async (skus: string) => {
-    await feedback.confirm('确定要下载吗？')
-    await apiDiyUserDownCreate({ skus })
-    feedback.msgSuccess("操作成功")
-    getLists()
+const downUserSave = async (skus: string) => {
+  await feedback.confirm('确定要下载吗？')
+  await apiDiyUserDownCreate({ skus })
+  feedback.msgSuccess('操作成功')
+  getLists()
 }
 }
 
 
-
 const handleDelete = async (skus: string) => {
 const handleDelete = async (skus: string) => {
-    await feedback.confirm('确定要删除？')
-    await apiDiyUserSaveDelete({ skus })
-    getLists()
+  await feedback.confirm('确定要删除？')
+  await apiDiyUserSaveDelete({ skus })
+  getLists()
 }
 }
 
 
-
-
-const handleAdd = async (row:any) => {
-    showEdit.value = true;
-    await nextTick();
-    editRef.value?.open('add',row);
+const handleAdd = async (row: any) => {
+  showEdit.value = true
+  await nextTick()
+  editRef.value?.open('add', row)
 }
 }
 
 
-
 onActivated(() => {
 onActivated(() => {
-    getLists()
+  getLists()
 })
 })
 
 
 onMounted(() => {
 onMounted(() => {
-    getLists()
+  getLists()
 })
 })
-
-
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .goodsInfo {
 .goodsInfo {
-    .title {
-        font-weight: bold;
-    }
-
+  .title {
+    font-weight: bold;
+  }
 }
 }
 
 
 .foxpsd_box {
 .foxpsd_box {
-    .zhutu_data {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-
-        .right_txt {
-            font-size: 16px;
-            font-weight: bold;
-            color: #333;
-
-            .ts {
-                color: #666;
-                font-weight: 400;
-            }
-        }
+  .zhutu_data {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    .right_txt {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+
+      .ts {
+        color: #666;
+        font-weight: 400;
+      }
     }
     }
+  }
 
 
-    .boy_detail {
-        margin-bottom: 20px;
-
-        .boy_biaoti {
-            font-size: 16px;
-            color: #38f;
-        }
+  .boy_detail {
+    margin-bottom: 20px;
 
 
-        .img_list {
-            display: flex;
-            flex-wrap: wrap;
-
-            .item_xiaoguo {
-                text-align: center;
-                font-size: 14px;
-                margin-bottom: 5px;
-                margin-right: 5px;
-            }
-        }
+    .boy_biaoti {
+      font-size: 16px;
+      color: #38f;
+    }
 
 
+    .img_list {
+      display: flex;
+      flex-wrap: wrap;
 
 
+      .item_xiaoguo {
+        text-align: center;
+        font-size: 14px;
+        margin-bottom: 5px;
+        margin-right: 5px;
+      }
     }
     }
-
+  }
 }
 }
 
 
 .nav_her_btn {
 .nav_her_btn {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    font-size: 18px;
-    color: #38f;
-    cursor: pointer;
-}</style>
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 18px;
+  color: #38f;
+  cursor: pointer;
+}
\ No newline at end of file
+</style>

src/views/userSave/lists/renderChima.vue

 <template>
 <template>
-    <div class="edit-popup">
-        <popup ref="popupRef" title="重新生成指定尺码" :async="true" width="800px" @confirm="handleSubmit" @close="handleClose">
-            <el-form ref="formRef" :model="formData" label-width="160px" :rules="formRules" class="w-[90%]" v-if="diy">
-
-                <el-form-item label="选择尺码" prop="chima_id">
-                    <el-select v-model="formData.chima_id" placeholder="请选择要生成的尺码">
-                        <el-option :value="item.id" :label="'标题：'+item.title + ' 编码：' + item.bianma"
-                            v-for="item in diy.chimaList"></el-option>
-                    </el-select>
-                </el-form-item>
-
-                <el-form-item label="生成图片格式" prop="sc_img_type">
-                    <el-radio-group v-model="formData.sc_img_type">
-                            <el-radio :label="1">JPG</el-radio>
-                            <el-radio :label="2">SVG</el-radio>
-                            <el-radio :label="3">TIFF</el-radio>
-                        </el-radio-group>
-                </el-form-item>
-
-                <el-form-item label="额外关联的数据" prop="posts_content">
-                    <div class="w-full">
-                        <el-input v-model="formData.posts_content" placeholder="JSON格式" type="textarea"
-                            :autosize="{ minRows: 3, maxRows: 3 }" maxlength="200" show-word-limit clearable />
-                        <div>非必填，没有可以不写</div>
-                        <div>
-                            <div>结构演示</div>
-                            [
-                                {
-                                    "name":"素材",
-                                    "content":"https://img.foxpsd.com/images%2Fth3.jpg"
-                                }
-                            ]
-                        </div>
-                    </div>
-
-                </el-form-item>
-            </el-form>
-        </popup>
-    </div>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      title="重新生成指定尺码"
+      :async="true"
+      width="800px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        label-width="160px"
+        :rules="formRules"
+        class="w-[90%]"
+        v-if="diy"
+      >
+        <el-form-item label="选择尺码" prop="chima_id">
+          <el-select
+            v-model="formData.chima_id"
+            placeholder="请选择要生成的尺码"
+          >
+            <el-option
+              v-for="(item, i) in diy.chimaList"
+              :value="item.id"
+              :label="'标题：' + item.title + ' 编码：' + item.bianma"
+              :key="i"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="生成图片格式" prop="sc_img_type">
+          <el-radio-group v-model="formData.sc_img_type">
+            <el-radio :label="1">JPG</el-radio>
+            <el-radio :label="2">SVG</el-radio>
+            <el-radio :label="3">TIFF</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="额外关联的数据" prop="posts_content">
+          <div class="w-full">
+            <el-input
+              v-model="formData.posts_content"
+              placeholder="JSON格式"
+              type="textarea"
+              :autosize="{ minRows: 3, maxRows: 3 }"
+              maxlength="200"
+              show-word-limit
+              clearable
+            />
+            <div>非必填，没有可以不写</div>
+            <div>
+              <div>结构演示</div>
+              [ { "name":"素材",
+              "content":"https://img.foxpsd.com/images%2Fth3.jpg" } ]
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+    </popup>
+  </div>
 </template>
 </template>
 
 
-
 <script lang="ts" setup>
 <script lang="ts" setup>
 import type { FormInstance } from 'element-plus'
 import type { FormInstance } from 'element-plus'
 import { apiDiyTemplateItem } from '@/api/product'
 import { apiDiyTemplateItem } from '@/api/product'
-import { apiDiyUserSaveChimaRender } from "@/api/member";
+import { apiDiyUserSaveChimaRender } from '@/api/member'
 import Popup from '@/components/popup/index.vue'
 import Popup from '@/components/popup/index.vue'
 
 
 const emit = defineEmits(['success', 'close'])
 const emit = defineEmits(['success', 'close'])
@@ -53,81 +74,76 @@ const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const mode = ref('add')
 const mode = ref('add')
 
 
 const formData = reactive({
 const formData = reactive({
-    chima_id: '',
-    sku:'',
-    posts_content: '',
-    sc_img_type:1
+  chima_id: '',
+  sku: '',
+  posts_content: '',
+  sc_img_type: 1
 })
 })
 
 
 const formRules: any = reactive({
 const formRules: any = reactive({
-    chima_id: [
-        {
-            required: true,
-            message: '请选择尺码',
-            trigger: 'blur'
-        }
-    ]
+  chima_id: [
+    {
+      required: true,
+      message: '请选择尺码',
+      trigger: 'blur'
+    }
+  ]
 })
 })
 
 
-
 const handleSubmit = async () => {
 const handleSubmit = async () => {
-    await formRef.value?.validate();
+  await formRef.value?.validate()
 
 
-    let obj: any = { ...toRaw(formData) };
+  const obj: any = { ...toRaw(formData) }
 
 
-    if(obj.posts_content){
-        obj.posts = JSON.parse(obj.posts_content);
-        delete obj.posts_content;
-    }
-    
-    await apiDiyUserSaveChimaRender(obj)
-    popupRef.value?.close()
-    emit('success')
+  if (obj.posts_content) {
+    obj.posts = JSON.parse(obj.posts_content)
+    delete obj.posts_content
+  }
+
+  await apiDiyUserSaveChimaRender(obj)
+  popupRef.value?.close()
+  emit('success')
 }
 }
 
 
-const userSaveItem = ref();
-const diy = ref();
+const userSaveItem = ref()
+const diy = ref()
 
 
 const getData = async (sku: string) => {
 const getData = async (sku: string) => {
-    let res = await apiDiyTemplateItem({
-        sku
-    })
-    diy.value = res.data
-    formData.sc_img_type = diy.value.sc_img_type
+  const res = await apiDiyTemplateItem({
+    sku
+  })
+  diy.value = res.data
+  formData.sc_img_type = diy.value.sc_img_type
 }
 }
 
 
 const open = (key = 'add', row: any) => {
 const open = (key = 'add', row: any) => {
-    userSaveItem.value = row;
-    formData.sku = row.sku;
-    getData(row.db_diy.sku)
-    mode.value = key
-    popupRef.value?.open();
+  userSaveItem.value = row
+  formData.sku = row.sku
+  getData(row.db_diy.sku)
+  mode.value = key
+  popupRef.value?.open()
 }
 }
 
 
-
 const setFormData = (data: Record<any, any>) => {
 const setFormData = (data: Record<any, any>) => {
-    for (const key in formData) {
-        if (data[key] != null && data[key] != undefined) {
-            //@ts-ignore
-            formData[key] = data[key]
-        }
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key]
     }
     }
+  }
 }
 }
 
 
-
-
-
 const getDetail = async (row: Record<string, any>) => {
 const getDetail = async (row: Record<string, any>) => {
-    setFormData(row);
+  setFormData(row)
 }
 }
 
 
 const handleClose = () => {
 const handleClose = () => {
-    emit('close')
+  emit('close')
 }
 }
 
 
 defineExpose({
 defineExpose({
-    open,
-    setFormData,
-    getDetail
+  open,
+  setFormData,
+  getDetail
 })
 })
 </script>
 </script>