bjbyrd-website/src/views/admin/article.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="content" />
      <!-- <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="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="content">
        <el-input v-model="ruleForm.content" type="textarea" />
      </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="FILE_LIMIT"
          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="contentFile">
        <el-upload v-model:file-list="typeFileList" :action="uploadUrl" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handeTypeUploadSuccess" :limit="CONTENT_FILE_LIMIT"
          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 FILE_LIMIT = 6;
const CONTENT_FILE_LIMIT = 1;


let centerDialogVisible = ref(false)
let ruleForm = reactive<any>({
  id: 0,
  name: '',
  content: '',
  file: [],
  contentFile: [],
})
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' },
  ],
  content: [
    {
      required: true,
      message: '请输入内容',
      trigger: 'blur',
    },
    { max: 1000, message: '长度不能超过1000', trigger: 'blur' },
  ],
  file: [
    {
      type: 'Array',
      required: true,
      message: '请上传图片',
    },
  ],
  
  contentFile: [
    {
      type: 'Array',
      required: true,
      message: '请上传图片',
    },
  ],
})

const handeUploadSuccess = (res: any, uploadFile: any) => {
  const { Id } = res.data;
  if (Id) {
    ruleForm.file.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.contentFile.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.file = params.file.join(',');
  params.contentFile = params.contentFile.join(',');

  // 提交
  let res: any;
  if (ruleForm.id) {
    res = await request.put('/GwHome/gwhome', params);
  } else {
    delete params.id;
    res = await request.post('/GwHome/gwhome', 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.content = row.content;
  ruleForm.file = row.file.split(',');
  ruleForm.contentFile = row.contentFile.split(',');
  ruleForm.id = row.id;
  fileList.value = [];
  typeFileList.value = [];
  // console.log(toRaw(ruleForm).nameFile, 'ruleForm.nameFile')
  if (ruleForm.file) {

      toRaw(ruleForm).file.forEach((o: any) => {
          fileList.value.push({
              uid: o,
              name: o,
              url: baseApiUrl + (row.fileInfo as any)[`${o}`],
          });
      })
    
  }

  if (ruleForm.contentFile) {
      toRaw(ruleForm).contentFile.forEach((o: any) => {
          typeFileList.value.push({
              uid: o,
              name: o,
              url: baseApiUrl + (row.contentFileInfo 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('/GwHome/gwhome/' + id);

      await alterRes(res);
    });
}

let tableData = ref([]);

const getList = async () => {
  const res = await request.get('/GwHome/gwhome');

  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: '',
    content: '',
    file: [],
    contentFile: [],
  })

  fileList.value = [];

  typeFileList.value = [];
}



</script>