From a2d1305482d984fafce0b6e31f6bc8dfa0ed9a70 Mon Sep 17 00:00:00 2001
From: glj <glj>
Date: Mon, 8 May 2023 19:32:29 +0800
Subject: [PATCH] =?UTF-8?q?glj-=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/websites/websites.js                  |  50 +++++
 .../component/editPicture.vue                 | 174 +++---------------
 .../disasterPartners/component/upload.vue     |  98 ++--------
 .../dataService/disasterPartners/index.vue    |  44 ++---
 4 files changed, 100 insertions(+), 266 deletions(-)
 create mode 100644 src/api/websites/websites.js

diff --git a/src/api/websites/websites.js b/src/api/websites/websites.js
new file mode 100644
index 0000000..531d5ff
--- /dev/null
+++ b/src/api/websites/websites.js
@@ -0,0 +1,50 @@
+import request from '/@/utils/request';
+import { moduleName } from '/@/utils/request';
+
+export function websitesPage(current, size, params) {
+  return request({
+    url: '/api/' + moduleName + '/ui/websites/websitesPage',
+    method: 'get',
+    params: {
+      current,
+      size,
+      ...params
+    },
+  });
+};
+
+export function saveWebsites(data) {
+  return request({
+    url: '/api/' + moduleName + '/ui/websites/saveWebsites',
+    method: 'post',
+    data: data
+  });
+};
+
+export function updateWebsites(data) {
+  return request({
+    url: '/api/' + moduleName + '/ui/websites/updateWebsites',
+    method: 'post',
+    data: data
+  });
+};
+
+export const delWebsites = (id) => {
+  return request({
+    url: '/api/' + moduleName + '/ui/websites/remove',
+    method: 'delete',
+    params: {
+      id
+    }
+  });
+};
+
+export const getWebsitesById = (id) => {
+  return request({
+    url: '/api/' + moduleName + '/ui/websites/getWebsitesById',
+    method: 'get',
+    params: {
+      id
+    }
+  });
+};
\ No newline at end of file
diff --git a/src/views/dataService/disasterPartners/component/editPicture.vue b/src/views/dataService/disasterPartners/component/editPicture.vue
index a58963a..9140af7 100644
--- a/src/views/dataService/disasterPartners/component/editPicture.vue
+++ b/src/views/dataService/disasterPartners/component/editPicture.vue
@@ -1,29 +1,13 @@
 <template>
-  <el-dialog title="edit picture" v-model="state.isShowDialog" width="700px" :close-on-click-modal="false"
-    @close="closeDialog">
+  <el-dialog title="edit" v-model="state.isShowDialog" width="550px">
     <el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
-      <el-form-item label="upload picture" prop="img">
-        <el-upload ref="upFileRef" v-model:file-list="state.fileList" action="#" list-type="picture-card" accept="image/*"
-          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="changeUpload" :limit="1"
-          :auto-upload="false" :class="{ hide: state.hideUpload }">
-          <el-icon>
-            <Plus />
-          </el-icon>
-        </el-upload>
-
-        <el-dialog v-model="state.dialogVisible">
-          <img w-full :src="state.dialogImageUrl" alt="Preview Image" />
-        </el-dialog>
-      </el-form-item>
-      <el-form-item prop="title" label="data title">
-        <el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter data title" :rows="3" type="text"
+      <el-form-item prop="title" label="name">
+        <el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter name" :rows="3" type="text"
           style="width:220px;" />
       </el-form-item>
-      <el-form-item label="Home page show" prop="isMain">
-        <el-select v-model="state.ruleForm.isMain" class="m-2" placeholder="please select home show">
-          <el-option label="show" value="1"></el-option>
-          <el-option label="not show" value="0"></el-option>
-        </el-select>
+      <el-form-item prop="link" label="link">
+        <el-input v-model="state.ruleForm.link" class="m-2" placeholder="please enter link" :rows="3" type="text"
+          style="width:220px;" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -36,112 +20,46 @@
 </template>
 
 <script setup>
-import { Plus } from '@element-plus/icons-vue'
 import { reactive, ref } from "vue";
-import { updatePicture } from '/@/api/data/pictureInfo.js';
+import { getWebsitesById, updateWebsites } from '/@/api/websites/websites.js';
 import { ElMessage } from "element-plus";
-import { UploadFilled } from '@element-plus/icons-vue'
-import { computed } from "@vue/reactivity";
-const upFileRef = ref();
 const emit = defineEmits(['callback']);
 const adminAddFormRef = ref();
 const state = reactive({
-  dialogVisible: false,
-  dialogImageUrl: '',
-  disabled: false,
-  hideUpload: false,
-  fileList: [],
   isShowDialog: false,
   isLoading: false,
   ruleForm: {
+    title: null,
   },
-  tableData: [],
-  //字典值
-  dictData: [],
-  unitData: [],
-  standardId: '',
-  detectionData: [],
-  disasterId: null,
-  dataForm: new FormData(),
-  fileArray: [],
-  id: null,
 })
-//上传图片改变时
-const changeUpload = (file, fileList) => {
-  state.dialogImageUrl = file.url;
-  state.hideUpload = fileList.length >= 1;
-}
-//验证图片
-const validImg = (rule, value, callback) => {
-  if (state.fileList.length > 0) {
-    adminAddFormRef.value.clearValidate('img')
-    callback();
-  } else {
-    return callback(new Error('please upload image'));
-  }
-}
+
 //校验规则
 const rules = reactive({
-  img: [
-    { required: true, trigger: 'change', validator: validImg }
+  title: [
+    { required: true, message: 'please enter name', trigger: 'blur' }
   ],
-  isMain: [
-    { required: true, message: 'please select home page show', trigger: 'change' }
-  ],
-  remark: [
-    { required: true, message: 'please select data details', trigger: 'blur' }
+  link: [
+    { required: true, message: 'please enter link', trigger: 'blur' }
   ],
 })
-//图片删除
-const handleRemove = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles)
-  state.hideUpload = state.fileList.length >= 1
-}
-//图片预览
-const handlePictureCardPreview = (uploadFile) => {
-  state.dialogImageUrl = uploadFile.url
-  state.dialogVisible = true
-}
-//图片上传之前
-const beforeUpload = (file) => {
-  const isLt1GB = file.size / 1024 / 1024 / 1024 < 1;
-  if (!isLt1GB) {
-    ElMessage.warning('The size of the uploaded picture cannot exceed 1GB!');
-  }
-  return isLt1GB;
-}
-//手动上传操作
-const uploadPic = (data) => {
-  state.fileArray.push(data.file);
-}
-//移除时
-const removePic = (data) => {
-  state.fileArray.splice(state.fileArray.findIndex(item => item.uid === data.raw.uid), 1)
-  console.log(state.fileArray)
-}
+
 //重置表单
 const resetField = () => {
   adminAddFormRef.value.resetFields();
-  state.fileList = [];
-  upFileRef.value.clearFiles();
 }
 
 // 打开弹窗
 const openDialog = (row) => {
   state.isShowDialog = true;
-  //回显图片
-  state.fileList.push({ 'name': row.name, 'uid': row.id, 'url': row.link });
-  state.hideUpload = state.fileList.length >= 1
-  //state.dialogImageUrl = row.link;
-  state.ruleForm.isMain = row.isMain + "";
-  state.ruleForm.title = row.name;
-  state.id = row.id
+  state.ruleForm.id = row.id;
+  getWebsitesById(row.id).then(da=>{
+    state.ruleForm.title = da.title;
+    state.ruleForm.link = da.link;
+  })
 };
 // 关闭弹窗
 const closeDialog = () => {
   state.isShowDialog = false;
-  //重置表格数据
-  state.ruleForm.tableData = [];
   resetField();
 };
 // 取消
@@ -152,24 +70,9 @@ const onCancel = () => {
 const onSubmit = () => {
   adminAddFormRef.value.validate((valid, fields) => {
     if (valid) {
-      console.log(state.fileList);
       state.isLoading = true;
-
-      state.fileList.forEach(item => {
-        console.log(item.raw,"item.raw");
-        if (item.raw) {
-          console.log(1111111111111);
-          state.dataForm.append('file', item.raw);
-        }
-      })
-      state.dataForm.append('isMain', state.ruleForm.isMain);
-      state.dataForm.append('id', state.id);
-      state.dataForm.append('name', state.ruleForm.title);
-      for (let [a, b] of state.dataForm.entries()) {
-        console.log(a, b, '--------------');
-      }
-      updatePicture(state.dataForm).then(res => {
-        ElMessage.success("Upload successfully");
+      updateWebsites(state.ruleForm).then(da => {
+        ElMessage.success("success");
         emit('callback');
       }).finally(() => {
         state.isLoading = false;
@@ -186,37 +89,4 @@ defineExpose({
 });
 </script>
 
-<style scoped>
-.avatar-uploader .avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-</style>
-
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: var(--el-transition-duration-fast);
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
-
-.el-icon.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  text-align: center;
-}
-
-.hide .el-upload--picture-card {
-  display: none;
-}
-</style>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/dataService/disasterPartners/component/upload.vue b/src/views/dataService/disasterPartners/component/upload.vue
index 79ab822..f699dc0 100644
--- a/src/views/dataService/disasterPartners/component/upload.vue
+++ b/src/views/dataService/disasterPartners/component/upload.vue
@@ -1,29 +1,13 @@
 <template>
   <el-dialog title="upload" v-model="state.isShowDialog" width="700px">
     <el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
-      <el-form-item label="upload picture" prop="img">
-        <el-upload ref="upFileRef" class="upload-demo" drag accept="image/*" action="#" multiple :http-request="uploadPic"
-          :on-remove="removePic" :before-upload="beforeUpload">
-          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-          <div class="el-upload__text">
-            Drop file here or <em>click to upload</em>
-          </div>
-          <template #tip>
-            <div class="el-upload__tip">
-              image files with a size less than 1GB
-            </div>
-          </template>
-        </el-upload>
-      </el-form-item>
-      <el-form-item prop="title" label="data title">
-        <el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter data title" :rows="3" type="text"
+      <el-form-item prop="title" label="name">
+        <el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter name" :rows="3" type="text"
           style="width:220px;" />
       </el-form-item>
-      <el-form-item label="Home page show" prop="isMain">
-        <el-select v-model="state.ruleForm.isMain" class="m-2" placeholder="please select home show">
-          <el-option label="show" value="1"></el-option>
-          <el-option label="not show" value="0"></el-option>
-        </el-select>
+      <el-form-item prop="link" label="link">
+        <el-input v-model="state.ruleForm.link" class="m-2" placeholder="please enter link" :rows="3" type="text"
+          style="width:220px;" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -37,9 +21,8 @@
 
 <script setup>
 import { reactive, ref } from "vue";
-import { uploadData } from '/@/api/data/pictureInfo.js';
+import { saveWebsites } from '/@/api/websites/websites.js';
 import { ElMessage } from "element-plus";
-import { UploadFilled } from '@element-plus/icons-vue'
 const upFileRef = ref();
 const emit = defineEmits(['callback']);
 const adminAddFormRef = ref();
@@ -47,55 +30,20 @@ const state = reactive({
   isShowDialog: false,
   isLoading: false,
   ruleForm: {
-    title:null,
+    title: null,
   },
-  tableData: [],
-  //字典值
-  dictData: [],
-  unitData: [],
-  standardId: '',
-  detectionData: [],
-  disasterId: null,
-  dataForm: new FormData(),
-  fileArray: [],
 })
-const validImg = (rule, value, callback) => {
-  if (state.fileArray.length > 0) {
-    adminAddFormRef.value.clearValidate('img')
-    callback();
-  } else {
-    return callback(new Error('please upload image'));
-  }
-}
+
 //校验规则
 const rules = reactive({
-  img: [
-    { required: true, trigger: 'change', validator: validImg }
+  title: [
+    { required: true, message: 'please enter name', trigger: 'blur' }
   ],
-  isMain: [
-    { required: true, message: 'please select home page show', trigger: 'change' }
-  ],
-  remark: [
-    { required: true, message: 'please select data details', trigger: 'blur' }
+  link: [
+    { required: true, message: 'please enter link', trigger: 'blur' }
   ],
 })
-//图片上传之前
-const beforeUpload = (file) => {
-  const isLt1GB = file.size / 1024 / 1024 / 1024 < 1;
-  if (!isLt1GB) {
-    ElMessage.warning('The size of the uploaded picture cannot exceed 1GB!');
-  }
-  return isLt1GB;
-}
-//手动上传操作
-const uploadPic = (data) => {
-  state.fileArray.push(data.file);
-}
-//移除时
-const removePic = (data) => {
-  state.fileArray.splice(state.fileArray.findIndex(item => item.uid === data.raw.uid), 1)
-  console.log(state.fileArray)
-}
+
 //重置表单
 const resetField = () => {
   adminAddFormRef.value.resetFields();
@@ -106,13 +54,11 @@ const resetField = () => {
 // 打开弹窗
 const openDialog = (row) => {
   state.isShowDialog = true;
-  state.disasterId = row;
+  state.ruleForm.disasterId = row;
 };
 // 关闭弹窗
 const closeDialog = () => {
   state.isShowDialog = false;
-  //重置表格数据
-  state.ruleForm.tableData = [];
   resetField();
 };
 // 取消
@@ -124,20 +70,8 @@ const onSubmit = () => {
   adminAddFormRef.value.validate((valid, fields) => {
     if (valid) {
       state.isLoading = true;
-      state.fileArray.forEach(item => {
-        state.dataForm.append('file', item);
-      })
-      state.dataForm.append('disasterId', state.disasterId);
-      state.dataForm.append('isMain', state.ruleForm.isMain);
-      state.dataForm.append('title', state.ruleForm.title);
-      for (let [a, b] of state.dataForm.entries()) {
-        console.log(a, b, '--------------');
-      }
-      uploadData(state.dataForm).then(res => {
-        state.dataForm = new FormData(),
-        state.fileArray = [];
-        upFileRef.value.clearFiles();
-        ElMessage.success("Upload successfully");
+      saveWebsites(state.ruleForm).then(da => {
+        ElMessage.success("success");
         emit('callback');
       }).finally(() => {
         state.isLoading = false;
diff --git a/src/views/dataService/disasterPartners/index.vue b/src/views/dataService/disasterPartners/index.vue
index 83a582e..2112992 100644
--- a/src/views/dataService/disasterPartners/index.vue
+++ b/src/views/dataService/disasterPartners/index.vue
@@ -10,14 +10,6 @@
         <el-col :span="14">
           <div class="system-role-padding layout-padding-auto layout-padding-view" style="height: 90vh;">
             <div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
-              <!--            <el-input size="default" placeholder="please enter username" style="max-width: 180px" v-model="state.searchName"
-                      clearable></el-input>
-            <el-button size="default" type="primary" class="ml10" @click="getTableData">
-              <el-icon>
-                <ele-Search/>
-              </el-icon>
-              search
-            </el-button>-->
               <el-button size="default" type="success" class="ml10" @click="uploadData">
                 <el-icon>
                   <ele-Upload />
@@ -36,22 +28,12 @@
               @selection-change="handleSelectionChange" style="width: 100%">
               <el-table-column type="selection" width="55" />
               <el-table-column type="index" label="ID" width="50" />
-              <el-table-column prop="name" label="Name" show-overflow-tooltip>
+              <el-table-column prop="title" label="Name" width="120" show-overflow-tooltip>
                 <template #default="scope">
-                  {{ formatName(scope.row.name) }}
-                </template>
-              </el-table-column>
-              <el-table-column prop="link" label="Image" show-overflow-tooltip>
-                <template #default="scope">
-                  <el-popover trigger="hover" placement="right" popper-class="max-h-300px overflow-auto" :width="330">
-                    <!-- table中原本显示的图片 -->
-                    <template #reference>
-                      <img :src="scope.row.link" :alt="scope.row.link" style="max-height: 130px;max-width: 130px">
-                    </template>
-                    <!-- 鼠标移入时弹出的图片 -->
-                    <img :src="scope.row.link" alt="" style="height: 150px;width: 300px">
-                  </el-popover>
+                  {{ formatName(scope.row.title) }}
                 </template>
+              </el-table-column> 
+              <el-table-column prop="link" label="Link" width="450" show-overflow-tooltip>
               </el-table-column>
               <el-table-column prop="Operate" label="Operate" show-overflow-tooltip>
                 <template #default="scope">
@@ -69,7 +51,6 @@
         </el-col>
       </el-row>
     </el-config-provider>
-    <RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
     <Upload ref="uploadRef" @callback="getTableData" />
     <EditPicture ref="editUploadRef" @callback="getTableData" />
   </div>
@@ -79,7 +60,8 @@
 import type { TabsPaneContext } from 'element-plus';
 import Upload from './component/upload.vue';
 import EditPicture from './component/editPicture.vue';
-import { getPicturePage, getDisasterPage, delPicture } from '/@/api/data/pictureInfo.js';
+import { getDisasterPage } from '/@/api/data/pictureInfo.js';
+import { websitesPage, delWebsites } from '/@/api/websites/websites.js';
 import en from 'element-plus/dist/locale/en.mjs';
 const activeName = ref('first');
 import disasterTable from "/@/components/table/DisasterTable.vue";
@@ -87,12 +69,10 @@ import disasterTable from "/@/components/table/DisasterTable.vue";
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 // 引入组件
-const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
 const auditRef = ref();
 const uploadRef = ref();
 const editUploadRef = ref();
 // 定义变量内容
-const roleDialogRef = ref();
 const state = reactive({
   multipleSelection: [],
   tabVal: 'first',
@@ -123,7 +103,6 @@ const handleSelectionChange = (val) => {
 };
 //格式化图片名称
 const formatName = (name) => {
-
   return name;
 };
 const auditData = (row) => {
@@ -185,7 +164,8 @@ const getDisasterData = () => {
 // 初始化表格数据
 const getTableData = () => {
   state.tableData.loading = true;
-  getPicturePage(state.tableData.param.pageNum, state.tableData.param.pageSize, { disasterId_equal: state.disasterId, isDeleted_equal: 0 }).then(
+
+  websitesPage(state.tableData.param.pageNum, state.tableData.param.pageSize, { disasterId: state.disasterId}).then(
     (res) => {
       state.tableData.data = res.records;
       state.tableData.total = res.total;
@@ -213,14 +193,14 @@ const batchDel = () => {
     ElMessage.warning('Select the data to be operated first');
     return false;
   }
-  ElMessageBox.confirm(`This action batch deletes the picture data，Whether to continue?`, 'tip', {
+  ElMessageBox.confirm(`This action batch deletes the data，Whether to continue?`, 'tip', {
     confirmButtonText: 'confirm',
     cancelButtonText: 'cancel',
     type: 'warning',
   })
     .then(() => {
       let id = state.multipleSelection.map((item) => item.id);
-      delPicture(id.join()).then((res) => {
+      delWebsites(id.join()).then((res) => {
         getTableData();
         ElMessage.success('delete successfully');
       });
@@ -229,13 +209,13 @@ const batchDel = () => {
 };
 // 删除图片信息
 const del = (row) => {
-  ElMessageBox.confirm(`This action will delete the picture：“${row.name}”，，Whether to continue?`, 'tip', {
+  ElMessageBox.confirm(`This action will delete the picture：“${row.title}”，，Whether to continue?`, 'tip', {
     confirmButtonText: 'confirm',
     cancelButtonText: 'cancel',
     type: 'warning',
   })
     .then(() => {
-      delPicture(row.id).then((res) => {
+      delWebsites(row.id).then((res) => {
         getTableData();
         ElMessage.success('delete successfully');
       });