bjbyrd-website/src/views/admin/product.vue

<template>

    <el-row>
      <div>
        <el-button @click="addInfo">添加产品</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'
  
  
  const centerDialogVisible = ref(false)
  let ruleForm = reactive<any>({
    id: 0,
    name: '',
    nameContent: '',
    nameFile: [],
    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 handeTypeUploadSuccess = (res: any, uploadFile: any) => {
    const { Id } = res.data;
    if (Id) {
      ruleForm.typeFile.push(Id);

      uploadFile.uid = Id;
      uploadFile.name = Id;
      typeFileList.value[typeFileList.value.length -1] = uploadFile;
    }
  }
  
  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);
    } else {
      delete params.id;
      res = await request.post('/Product/product', params);
    }
  
    await alterRes(res);
  
  
  }
  
  const alterRes = async (res: any) => {
    if (res.state === 'success') {
      ElMessage({
        message: '操作成功',
        type: 'success',
      })
      await getList();
      centerDialogVisible.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()))
    )
  )
  
  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);
      });
  }
  
  let tableData = ref([]);
  
  const getList = async () => {
    const res = await request.get('/Product/product');
  
    if (res.data.length > 0) tableData.value = res.data;
  }
  
  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;
    });

    ruleForm.typeFile = ruleForm.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>