mod:产品型号多个以及文章图片多个

src/views/admin/activity.vue

@@ -10,8 +10,7 @@
     <el-table :data="filterTableData" style="width: 100%">
       <el-table-column label="活动" width="120">
         <template #default="scope">
-          <el-image style="width: 100px; height: 50px" :src="baseApiUrl + scope.row.fileInfo[scope.row.file]"
-            :fit="'scale-down'" />
+          <el-image :src="baseApiUrl + scope.row.fileInfo[scope.row.file.split(',')[0]]" :fit="'scale-down'" />
         </template>
       </el-table-column>
       <el-table-column label="标题" prop="title" />
@@ -31,7 +30,7 @@
   </el-row>
 
 
-  <el-dialog v-model="centerDialogVisible" title="活动信息" width="500" center>
+  <el-dialog v-model="centerDialogVisible" title="活动信息" width="500" height="500" center :lock-scroll="false">
 
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
       :size="'default'" status-icon>
@@ -45,9 +44,9 @@
       </el-form-item>
 
       <el-form-item label="活动图片" prop="file">
-        <el-upload v-model:file-list="fileList" :action="uploadUrl" list-type="picture-card"
-          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handeUploadSuccess" limit="1"
-          accept="image/*">
+        <el-upload multiple v-model:file-list="fileList" :action="uploadUrl"
+          list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+          :on-success="handeUploadSuccess" limit="11" accept="image/*">
           <el-icon>
             <Plus />
           </el-icon>
@@ -132,7 +131,7 @@ const handeUploadSuccess = (res: any) => {
   console.log(res, 'res')
   const { Id } = res.data;
   if (Id) {
-    ruleForm.file = [Id]
+    ruleForm.file.push(Id);
   }
 }
 
@@ -198,15 +197,20 @@ const filterTableData = computed(() =>
 )
 
 const handleEdit = (row: Acitvity) => {
+  fileList.value = [];
   ruleForm.title = row.title;
   ruleForm.content = row.content;
   ruleForm.file = row.file.split(',');
   ruleForm.id = row.id;
-  if (ruleForm.file) {
-    fileList.value.push({
-      name: row.id,
-      url: baseApiUrl + (row.fileInfo as any)[`${ruleForm.file}`],
+  if (ruleForm.file && ruleForm.file.length > 0) {
+
+    ruleForm.file.map((o: any) => {
+      fileList.value.push({
+        name: o,
+        url: baseApiUrl + (row.fileInfo as any)[`${o}`],
+      });
     });
+
   }
 
   centerDialogVisible.value = true;
@@ -248,13 +252,14 @@ onMounted(async () => {
 
 
 const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles: any) => {
-  console.log(uploadFile, uploadFiles)
+
+  ruleForm.file = uploadFiles.map((o: any) => o.name);
 }
 
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
-  dialogImageUrl.value = uploadFile.url!
+  dialogImageUrl.value = uploadFile.url;
   dialogVisible.value = true
 }
 
@@ -273,4 +278,38 @@ const addInfo = () => {
 
 }
 
-</script>
+</script>
+
+<style scoped lang="scss">
+/deep/.el-upload-list--picture-card {
+  width: 350px;
+}
+
+/deep/.el-upload--picture-card {
+  width: 5px;
+  height: 50px;
+}
+
+/deep/.el-upload {
+  width: 50px;
+  height: 50px;
+  // line-height: 50px;
+}
+
+/deep/.el-upload-list--picture-card .el-upload-list__item {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+
+/deep/.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+
+/deep/.avatar {
+  width: 50px;
+  height: 50px;
+}
+</style>

src/views/admin/article.vue

@@ -32,7 +32,7 @@
   </el-row>
 
 
-  <el-dialog v-model="centerDialogVisible" title="产品信息" width="500" center>
+  <el-dialog v-model="centerDialogVisible" title="文章信息" width="500" center>
 
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
       :size="'default'" status-icon>

src/views/admin/product.vue

@@ -1,356 +1,521 @@
 <template>
 
-    <el-row>
-      <div>
-        <el-button @click="addInfo">添加产品</el-button>
+  <el-row>
+    <div>
+      <el-button @click="addInfo">添加产品</el-button>
+    </div>
+  </el-row>
+
+  <el-row>
+    <el-table :data="filterTableData" @expand-change="loadTypes" style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="scope">
+          <div m="4" style="margin-left: 50px;">
+            <h3>产品型号</h3>
+            <el-table :data="typeObject[`${scope.row.id}`]" :border="false">
+
+              <el-table-column label="型号图片" width="120">
+                <template #default="scope">
+                  <el-image style="width: 50px; height: 30px"
+                    :src="baseApiUrl + scope.row.typeFileInfo[scope.row.typeFile.split(',')[0]]" :fit="'scale-down'" />
+                </template>
+              </el-table-column>
+              <el-table-column label="型号名称" prop="type" width="120" />
+              <el-table-column label="型号说明" prop="typeContent" />
+
+              <el-table-column label="创建时间" prop="createTime" width="120" />
+
+              <el-table-column align="right" width="250">
+
+                <template #default="scope">
+                  <el-button size="small" @click="handleEditType(scope.row, '')">修改</el-button>
+                  <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="产品图片" width="120">
+        <template #default="scope">
+          <el-image style="width: 50px; height: 30px" :src="baseApiUrl + scope.row.nameFileInfo[scope.row.nameFile.split(',')[0]]"
+            :fit="'scale-down'" />
+        </template>
+      </el-table-column>
+      <el-table-column label="产品名称" prop="name" width="120" />
+      <el-table-column label="产品说明" prop="nameContent" />
+
+      <el-table-column label="创建时间" prop="createTime" width="120" />
+
+      <el-table-column align="right" width="250">
+        <template #header>
+          <el-input v-model="search" size="small" placeholder="请输入产品名称" />
+        </template>
+        <template #default="scope">
+          <el-button size="small" @click="handleEditType(scope.row, 'add')">添加型号</el-button>
+          <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-row>
+
+
+  <el-dialog v-model="centerDialogVisible" title="产品信息" width="500" center>
+
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
+      :size="'default'" status-icon>
+      <el-form-item label="产品名称" prop="name">
+        <el-input v-model="ruleForm.name" />
+      </el-form-item>
+      <el-form-item label="产品说明" prop="nameContent">
+        <el-input v-model="ruleForm.nameContent" type="textarea" />
+      </el-form-item>
+
+      <el-form-item label="产品图片" prop="nameFile">
+        <el-upload v-model:file-list="fileList" :action="uploadUrl" list-type="picture-card"
+          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handeUploadSuccess" limit="8"
+          accept="image/*">
+          <el-icon>
+            <Plus />
+          </el-icon>
+        </el-upload>
+
+        <!-- <el-dialog v-model="dialogVisible">
+          <img w-full :src="dialogImageUrl" alt="Preview Image" />
+        </el-dialog> -->
+      </el-form-item>
+
+      <el-form-item>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm(ruleFormRef)">
+          提交
+        </el-button>
       </div>
-    </el-row>
-  
-    <el-row>
-      <el-table :data="filterTableData" style="width: 100%">
-        <el-table-column label="产品名称" prop="name" />
-        <el-table-column label="产品型号" prop="type" />
-        <!-- <el-table-column label="活动" width="120">
-          <template #default="scope">
-            <el-image style="width: 100px; height: 50px" :src="baseApiUrl + scope.row.fileInfo[scope.row.file]"
-              :fit="'scale-down'" />
-          </template>
-        </el-table-column> -->
-        
-        <el-table-column label="产品说明" prop="nameContent" />
-        <el-table-column label="型号说明" prop="typeContent" />
-        <el-table-column label="创建时间" prop="createTime" style="width: 100px;" />
-  
-        <el-table-column align="right" style="width: 100px;">
-          <template #header>
-            <el-input v-model="search" size="small" placeholder="请输入产品名称" />
-          </template>
-          <template #default="scope">
-            <el-button size="small" @click="handleEdit(scope.row)">Edit</el-button>
-            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">Delete</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
-  
-  
-    <el-dialog v-model="centerDialogVisible" title="产品信息" width="500" center>
-  
-      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
-        :size="'default'" status-icon>
-        <el-form-item label="产品名称" prop="name">
-          <el-input v-model="ruleForm.name" />
-        </el-form-item>
-        <el-form-item label="产品说明" prop="nameContent">
-          <el-input v-model="ruleForm.nameContent" type="textarea" />
-        </el-form-item>
-
-        <el-form-item label="产品图片" prop="nameFile">
-          <el-upload v-model:file-list="fileList" :action="uploadUrl" list-type="picture-card"
-            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handeUploadSuccess" limit="8"
-            accept="image/*">
-            <el-icon>
-              <Plus />
-            </el-icon>
-          </el-upload>
-  
-          <el-dialog v-model="dialogVisible">
-            <img w-full :src="dialogImageUrl" alt="Preview Image" />
-          </el-dialog>
-        </el-form-item>
-
-
-        <el-form-item label="型号名称" prop="type">
-          <el-input v-model="ruleForm.type" />
-        </el-form-item>
-        <el-form-item label="型号说明" prop="typeContent">
-          <el-input v-model="ruleForm.typeContent" type="textarea" />
-        </el-form-item>
-
-        <el-form-item label="型号图片" prop="typeFile">
-          <el-upload v-model:file-list="typeFileList" :action="uploadUrl" list-type="picture-card"
-            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handeTypeUploadSuccess" limit="8"
-            accept="image/*">
-            <el-icon>
-              <Plus />
-            </el-icon>
-          </el-upload>
-  
-          <el-dialog v-model="dialogVisible">
-            <img w-full :src="dialogImageUrl" alt="Preview Image" />
-          </el-dialog>
-        </el-form-item>
- 
-        <el-form-item>
-        </el-form-item>
-      </el-form>
-  
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="centerDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="submitForm(ruleFormRef)">
-            提交
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </template>
-  
-  <script lang="ts" setup>
-  import { onMounted, ref, computed, reactive, toRaw } from 'vue'
-  import request from '../../utils/request'
-  import { Plus } from '@element-plus/icons-vue'
-  
-  import type { UploadProps, FormInstance } from 'element-plus'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  const baseApiUrl = process.env.VUE_APP_BASE_API_URL;
-  
-  const uploadUrl = baseApiUrl + '/system/accessories/upload'
-  
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="dialogVisible">
+    <img w-full :src="dialogImageUrl" alt="Preview Image" />
+  </el-dialog>
+
+  <el-dialog v-model="typeDialogVisible" title="型号信息" width="500" center>
   
-  const centerDialogVisible = ref(false)
-  let ruleForm = reactive<any>({
-    id: 0,
-    name: '',
-    nameContent: '',
-    nameFile: [],
-    type: '',
-    typeContent: '',
-    typeFile: [],
-  })
-  const fileList = ref([] as Array<any>);
+    <el-form ref="typeRuleFormRef" :model="typeRuleForm" :rules="typeRules" label-width="auto" class="demo-ruleForm"
+      :size="'default'" status-icon>
+
+      <el-form-item label="型号名称" prop="type">
+        <el-input v-model="typeRuleForm.type" />
+      </el-form-item>
+      <el-form-item label="型号说明" prop="typeContent">
+        <el-input v-model="typeRuleForm.typeContent" type="textarea" />
+      </el-form-item>
+
+      <el-form-item label="型号图片" prop="typeFile">
+        <el-upload v-model:file-list="typeFileList" :action="uploadUrl" list-type="picture-card"
+          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handeTypeUploadSuccess" limit="8"
+          accept="image/*">
+          <el-icon>
+            <Plus />
+          </el-icon>
+        </el-upload>
+
+      </el-form-item>
+
+      <el-form-item>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="typeDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="typeSubmitForm(typeRuleFormRef)">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed, reactive, toRaw } from 'vue'
+import request from '../../utils/request'
+import { Plus } from '@element-plus/icons-vue'
+
+import type { UploadProps, FormInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const baseApiUrl = process.env.VUE_APP_BASE_API_URL;
+const typeObject = ref({} as any);
+
+const uploadUrl = baseApiUrl + '/system/accessories/upload'
+
+
+const centerDialogVisible = ref(false)
+const typeDialogVisible = ref(false)
+let ruleForm = reactive<any>({
+  id: 0,
+  name: '',
+  nameContent: '',
+  nameFile: [],
+  type: '',
+  typeContent: '',
+  typeFile: [],
+})
+let typeRuleForm = reactive<any>({
+  id: 0,
+  productId: 0,
+  type: '',
+  typeContent: '',
+  typeFile: [],
+})
+const fileList = ref([] as Array<any>);
 const typeFileList = ref([] as Array<any>);
-  const ruleFormRef = ref<FormInstance>()
-  
-  const rules = reactive<any>({
-    name: [
-      { required: true, message: '请输入信息', trigger: 'blur' },
-      { max: 15, message: '长度不能超过15', trigger: 'blur' },
-    ],
-    nameContent: [
-      {
-        required: true,
-        message: '请输入内容',
-        trigger: 'blur',
-      },
-      { max: 1000, message: '长度不能超过1000', trigger: 'blur' },
-    ],
-    nameFile: [
-      {
-        type: 'Array',
-        required: true,
-        message: '请上传图片',
-      },
-    ],
-    type: [
-      { required: true, message: '请输入信息', trigger: 'blur' },
-      { max: 15, message: '长度不能超过15', trigger: 'blur' },
-    ],
-    typeContent: [
-      {
-        required: true,
-        message: '请输入内容',
-        trigger: 'blur',
-      },
-      { max: 1000, message: '长度不能超过1000', trigger: 'blur' },
-    ],
-    typeFile: [
-      {
-        type: 'Array',
-        required: true,
-        message: '请上传图片',
-      },
-    ],
-  })
-  
-  const handeUploadSuccess = (res: any, uploadFile: any) => {
-    const { Id } = res.data;
-    if (Id) {
-      ruleForm.nameFile.push(Id);
-
-      uploadFile.uid = Id;
-      uploadFile.name = Id;
-      fileList.value[fileList.value.length -1] = uploadFile;
-    }
+const ruleFormRef = ref<FormInstance>()
+const typeRuleFormRef = ref<FormInstance>()
+
+const rules = reactive<any>({
+  name: [
+    { required: true, message: '请输入信息', trigger: 'blur' },
+    { max: 15, message: '长度不能超过15', trigger: 'blur' },
+  ],
+  nameContent: [
+    {
+      required: true,
+      message: '请输入内容',
+      trigger: 'blur',
+    },
+    { max: 1000, message: '长度不能超过1000', trigger: 'blur' },
+  ],
+  nameFile: [
+    {
+      type: 'Array',
+      required: true,
+      message: '请上传图片',
+    },
+  ],
+  // type: [
+  //   { required: true, message: '请输入信息', trigger: 'blur' },
+  //   { max: 15, message: '长度不能超过15', trigger: 'blur' },
+  // ],
+  // typeContent: [
+  //   {
+  //     required: true,
+  //     message: '请输入内容',
+  //     trigger: 'blur',
+  //   },
+  //   { max: 1000, message: '长度不能超过1000', trigger: 'blur' },
+  // ],
+  // typeFile: [
+  //   {
+  //     type: 'Array',
+  //     required: true,
+  //     message: '请上传图片',
+  //   },
+  // ],
+})
+
+const typeRules = reactive<any>({
+  type: [
+    { required: true, message: '请输入信息', trigger: 'blur' },
+    { max: 15, message: '长度不能超过15', trigger: 'blur' },
+  ],
+  typeContent: [
+    {
+      required: true,
+      message: '请输入内容',
+      trigger: 'blur',
+    },
+    { max: 1000, message: '长度不能超过1000', trigger: 'blur' },
+  ],
+  typeFile: [
+    {
+      type: 'Array',
+      required: true,
+      message: '请上传图片',
+    },
+  ],
+})
+
+const handeUploadSuccess = (res: any, uploadFile: any) => {
+  const { Id } = res.data;
+  if (Id) {
+    ruleForm.nameFile.push(Id);
+
+    uploadFile.uid = Id;
+    uploadFile.name = Id;
+    fileList.value[fileList.value.length - 1] = uploadFile;
   }
+}
 
-  const handeTypeUploadSuccess = (res: any, uploadFile: any) => {
-    const { Id } = res.data;
-    if (Id) {
-      ruleForm.typeFile.push(Id);
+const loadTypes = async (clickRow: any, row: any) => {
 
-      uploadFile.uid = Id;
-      uploadFile.name = Id;
-      typeFileList.value[typeFileList.value.length -1] = uploadFile;
-    }
+  // 获取型号列表信息
+  if (row && row.length > 0) {
+    const res = await request.get(`/Type/type?productId=${clickRow.id}`);
+
+    if (res.data.length > 0) typeObject.value[`${clickRow.id}`] = res.data;
   }
-  
-  const submitForm = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    const valRes = await formEl.validate((valid) => {
-      if (valid) {
-        return true;
-      } else {
-        return true;
-      }
-    })
-  
-    if (!valRes) return;
-  
-    // console.log(toRaw(ruleForm), 'ruleForm')
 
-    const params = toRaw(ruleForm);
 
-    params.nameFile = params.nameFile.join(',');
-    params.typeFile = params.typeFile.join(',');
   
-    // 提交
-    let res: any;
-    if (ruleForm.id) {
-      res = await request.put('/Product/product', params);
+}
+
+const handeTypeUploadSuccess = (res: any, uploadFile: any) => {
+  const { Id } = res.data;
+  if (Id) {
+    typeRuleForm.typeFile.push(Id);
+
+    uploadFile.uid = Id;
+    uploadFile.name = Id;
+    typeFileList.value[typeFileList.value.length - 1] = uploadFile;
+  }
+}
+
+const typeSubmitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  const valRes = await formEl.validate((valid) => {
+    if (valid) {
+      return true;
     } else {
-      delete params.id;
-      res = await request.post('/Product/product', params);
+      return true;
     }
-  
-    await alterRes(res);
-  
-  
+  })
+
+  if (!valRes) return;
+
+  const params = toRaw(typeRuleForm);
+
+  params.typeFile = params.typeFile.filter((o: string) => {
+    return !!o;
+  }).join(',');
+
+  // 提交
+  let res: any;
+  if (typeRuleForm.id) {
+    res = await request.put('/Type/type', params);
+  } else {
+    delete params.id;
+    res = await request.post('/Type/type', params);
   }
-  
-  const alterRes = async (res: any) => {
-    if (res.state === 'success') {
-      ElMessage({
-        message: '操作成功',
-        type: 'success',
-      })
-      await getList();
-      centerDialogVisible.value = false;
+
+  await alterRes(res);
+
+}
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  const valRes = await formEl.validate((valid) => {
+    if (valid) {
+      return true;
     } else {
-      ElMessage({
-        message: res.message,
-        type: 'error',
-      })
+      return true;
     }
+  })
+
+  if (!valRes) return;
+
+
+  const params = toRaw(ruleForm);
+
+  params.nameFile = params.nameFile.join(',');
+
+  // 提交
+  let res: any;
+  if (ruleForm.id) {
+    res = await request.put('/Product/product', params);
+  } else {
+    delete params.id;
+    res = await request.post('/Product/product', params);
   }
-  
-  const search = ref('')
-  const filterTableData = computed(() =>
-    tableData.value.filter(
-      (data: any) =>
+
+  await alterRes(res);
+
+
+}
+
+const alterRes = async (res: any) => {
+  if (res.state === 'success') {
+    ElMessage({
+      message: '操作成功',
+      type: 'success',
+    })
+    await getList();
+    centerDialogVisible.value = false;
+    typeDialogVisible.value = false;
+  } else {
+    ElMessage({
+      message: res.message,
+      type: 'error',
+    })
+  }
+}
+
+const search = ref('')
+const filterTableData = computed(() =>
+  tableData.value.filter(
+    (data: any) =>
       !search.value ||
-            (data.name && data.name.toLowerCase().includes(search.value.toLowerCase()))
-    )
+      (data.name && data.name.toLowerCase().includes(search.value.toLowerCase()))
   )
-  
-  const handleEdit = (row: any) => {
-    ruleForm.name = row.name;
-    ruleForm.nameContent = row.nameContent;
-    ruleForm.nameFile = row.nameFile.split(',');
-    ruleForm.type = row.type;
-    ruleForm.typeContent = row.typeContent;
-    ruleForm.typeFile = row.typeFile.split(',');
-    ruleForm.id = row.id;
-    fileList.value = [];
-    typeFileList.value = [];
-    console.log(toRaw(ruleForm).nameFile, 'ruleForm.nameFile')
-    if (ruleForm.nameFile) {
-
-        toRaw(ruleForm).nameFile.forEach((o: any) => {
-            fileList.value.push({
-                uid: o,
-                name: o,
-                url: baseApiUrl + (row.nameFileInfo as any)[`${o}`],
-            });
-        })
-      
-    }
+)
 
-    if (ruleForm.typeFile) {
-        toRaw(ruleForm).typeFile.forEach((o: any) => {
-            typeFileList.value.push({
-                uid: o,
-                name: o,
-                url: baseApiUrl + (row.typeFileInfo as any)[`${o}`],
-            });
-        })
-    }
-  
-  
-    centerDialogVisible.value = true;
-  
-  }
-  const handleDelete = (id: number) => {
-    ElMessageBox.confirm(
-      '确定删除该活动吗？',
-      'Warning',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    )
-      .then(async () => {
-  
-        const res: any = await request.delete('/Product/product/' + id);
-  
-        await alterRes(res);
+const handleEditType = (row: any, type: string) => {
+  typeRuleForm.type = type === 'add' ? '' : row.type;
+  typeRuleForm.typeContent = type === 'add' ? '' : row.typeContent;
+  typeRuleForm.typeFile = type === 'add' ? [] : row.typeFile.split(',');
+  typeRuleForm.id = type === 'add' ? 0 : row.id;
+  typeRuleForm.productId = type === 'add' ? row.id : row.productId;
+  typeFileList.value = [];
+
+
+  if (typeRuleForm.typeFile) {
+    toRaw(typeRuleForm).typeFile.forEach((o: any) => {
+      typeFileList.value.push({
+        uid: o,
+        name: o,
+        url: baseApiUrl + (row.typeFileInfo as any)[`${o}`],
       });
+    })
   }
-  
-  let tableData = ref([]);
-  
-  const getList = async () => {
-    const res = await request.get('/Product/product');
-  
-    if (res.data.length > 0) tableData.value = res.data;
+
+
+  typeDialogVisible.value = true;
+
+}
+
+const handleEdit = (row: any) => {
+  ruleForm.name = row.name;
+  ruleForm.nameContent = row.nameContent;
+  ruleForm.nameFile = row.nameFile.split(',');
+  ruleForm.id = row.id;
+  fileList.value = [];
+  if (ruleForm.nameFile) {
+
+    toRaw(ruleForm).nameFile.forEach((o: any) => {
+      fileList.value.push({
+        uid: o,
+        name: o,
+        url: baseApiUrl + (row.nameFileInfo as any)[`${o}`],
+      });
+    })
+
   }
-  
-  onMounted(async () => {
-  
-    await getList();
-  })
-  
-  
-  
-  
-  
-  const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles: any) => {
-    console.log(uploadFile, uploadFiles)
 
-    ruleForm.nameFile = ruleForm.nameFile.filter((o: string) => {
-        return o !== uploadFile.uid;
-    });
+  centerDialogVisible.value = true;
+
+}
+
+
+const handleDelete = (id: number) => {
+  ElMessageBox.confirm(
+    '确定删除该活动吗？',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(async () => {
 
-    ruleForm.typeFile = ruleForm.typeFile.filter((o: string) => {
-        return o !== uploadFile.uid;
+      const res: any = await request.delete('/Product/product/' + id);
+
+      await alterRes(res);
     });
-  }
-  
-  const dialogImageUrl = ref('')
-  const dialogVisible = ref(false)
-  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
-    dialogImageUrl.value = uploadFile.url
-    dialogVisible.value = true
-  }
-  
-  const addInfo = () => {
-    centerDialogVisible.value = true
-
-    // 
-    ruleForm = reactive<any>({
-        id: 0,
-        name: '',
-        nameContent: '',
-        nameFile: [],
-        type: '',
-        typeContent: '',
-        typeFile: [],
-    })
+}
+
+let tableData = ref([]);
 
-    fileList.value = [];
+const getList = async () => {
+  const res = await request.get('/Product/product');
 
-    typeFileList.value = [];
+  if (res.data.length > 0) tableData.value = res.data;
 }
-  
-  </script>
+
+onMounted(async () => {
+
+  await getList();
+})
+
+
+
+
+
+const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles: any) => {
+
+  ruleForm.nameFile = ruleForm.nameFile.filter((o: string) => {
+    return o !== uploadFile.uid;
+  });
+
+  typeRuleForm.typeFile = typeRuleForm.typeFile.filter((o: string) => {
+    return o !== uploadFile.uid;
+  });
+}
+
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
+  dialogImageUrl.value = uploadFile.url
+  dialogVisible.value = true
+}
+
+const addInfo = () => {
+  centerDialogVisible.value = true
+
+  // 
+  ruleForm = reactive<any>({
+    id: 0,
+    name: '',
+    nameContent: '',
+    nameFile: [],
+    // type: '',
+    // typeContent: '',
+    // typeFile: [],
+  })
+
+  fileList.value = [];
+
+  // typeFileList.value = [];
+}
+
+</script>
+
+<style scoped lang="scss">
+/deep/.el-upload-list--picture-card {
+  width: 350px;
+}
+
+/deep/.el-upload--picture-card {
+  width: 5px;
+  height: 50px;
+}
+
+/deep/.el-upload {
+  width: 50px;
+  height: 50px;
+  // line-height: 50px;
+}
+
+/deep/.el-upload-list--picture-card .el-upload-list__item {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+
+/deep/.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+
+/deep/.avatar {
+  width: 50px;
+  height: 50px;
+}
+</style>