宝智达冷链后台富文本编辑器修改修改，后台获取联系方式

src/api/contact.js

@@ -0,0 +1,17 @@
+import http from '../utils/http/http.js'
+// 获取资源列表
+const getAllContact = (params) => {
+    return http.post('/contactall', params)
+};
+// 添加资源
+const addContact = (params) => {
+    return http.post('/contact', params)
+};
+
+// 删除资源
+const deleteContact = (params) => {
+    return http.del('/contact', params)
+}
+export default {
+    getAllContact, addContact, deleteContact
+}

src/view/contact/Detail.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>详情</span>
+          <el-button size="mini" style="float:right" @click="router.go(-1)">返回</el-button>
+          <el-button size="mini" style="float:right" type="primary" @click="updateContent">修改</el-button>
+        </div>
+      </template>
+      <el-form>
+        <el-form-item label="标题:">
+          <el-input v-model="contentsDetail.title" placeholder="请输入标题"/>
+        </el-form-item>
+        <el-form-item label="简介:">
+          <el-input v-model="contentsDetail.synopsis" placeholder="请输入简介"/>
+        </el-form-item>
+        <el-form-item label="详情:">
+          <editor :initial-value="contentsDetail.detail" @update:html="handleEditorChange"/>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {onBeforeMount, reactive, ref} from 'vue';
+import {useRoute, useRouter} from 'vue-router'
+import contents from "../../api/contents.js";
+import Editor from "../editor.vue";
+import {ElMessage} from "element-plus";
+
+const route = useRoute();
+const router = useRouter();
+const contentsDetail = reactive({
+  title: '',
+  detail: '',
+  synopsis: '',
+  types: '',
+})
+const parentHtmlContent = ref(''); // 父组件中的数据
+const handleEditorChange = (newHtml) => {
+  console.log(newHtml)
+  contentsDetail.detail = newHtml; // 当子组件编辑器内容变化时，更新父组件的数据
+};
+const updateContent = async () => {
+  const res = await contents.updateRecruit({
+    id: parseInt(route.query.id),
+    title: contentsDetail.title,
+    synopsis: contentsDetail.synopsis,
+    detail: contentsDetail.detail,
+    types: contentsDetail.types,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("修改成功")
+    await getRecruitDetail()
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+const getRecruitDetail = async () => {
+  const res = await contents.getRecruitDetail({id: route.query.id})
+  Object.assign(contentsDetail, res.data.Data);
+}
+onBeforeMount(async () => {
+  if (route.query.id) {
+    const res = await contents.getRecruitDetail({id: route.query.id})
+    Object.assign(contentsDetail, res.data.Data);
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/view/contact/add.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>详情</span>
+          <el-button size="mini" style="float:right" type="primary" @click="addContent">提交</el-button>
+          <el-button size="mini" style="float:right" type="info" @click="router.go(-1)">返回</el-button>
+        </div>
+      </template>
+      <el-form>
+        <el-form-item label="标题:">
+          <el-input v-model="contentsDetail.title" placeholder="请输入标题"/>
+        </el-form-item>
+        <el-form-item>
+          <el-switch v-model="contentsDetail.types" active-value="1" inactive-value="0" active-text="招聘"
+                     inactive-text="公告"/>
+        </el-form-item>
+        <el-form-item label="简介:">
+          <el-input v-model="contentsDetail.synopsis" placeholder="请输入简介"/>
+        </el-form-item>
+        <el-form-item label="详情:">
+          {{ contentsDetail.synopsis }}
+          <editor v-model="contentsDetail.synopsis"></editor>
+        </el-form-item>
+
+      </el-form>
+    </el-card>
+
+  </div>
+</template>
+<script setup>
+import {onBeforeMount, reactive} from 'vue';
+import {useRoute, useRouter} from 'vue-router'
+import contents from "../../api/contents.js";
+import Editor from "../editor.vue";
+import {ElMessage} from "element-plus";
+
+const route = useRoute();
+const router = useRouter();
+const contentsDetail = reactive({
+  title: '',
+  detail: '',
+  synopsis: '',
+  types: '',
+})
+const addContent = async () => {
+  const res = await contents.addRecruit({
+    id: parseInt(route.query.id),
+    title: contentsDetail.title,
+    synopsis: contentsDetail.synopsis,
+    detail: contentsDetail.detail,
+    types: contentsDetail.types,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("添加成功")
+    await getRecruitDetail()
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+const getRecruitDetail = async () => {
+  const res = await contents.getRecruitDetail({id: route.query.id})
+  Object.assign(contentsDetail, res.data.Data);
+}
+onBeforeMount(async () => {
+  if (route.query.id) {
+    const res = await contents.getRecruitDetail({id: route.query.id})
+    Object.assign(contentsDetail, res.data.Data);
+  }
+})
+</script>
+
+
+<style lang="scss" scoped></style>

src/view/contact/contact.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-card>
+      <!-- 添加el-dialog组件 -->
+      <el-table :data="tableData" border style="width: 100%;margin-top:20px">
+        <el-table-column label="序号" width="60">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="名称" width="180">
+          <template #default="scope">
+            {{ scope.row.name }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="synopsis" label="联系方式" width="180">
+          <template #default="scope">
+            {{ scope.row.phone }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="消息" width="180">
+          <template #default="scope">
+            {{ scope.row.message }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="时间" width="300">
+          <template #default="scope">
+            {{ scope.row.CreatedAt }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button type="danger" size="small" @click="deleteProduct(scope.row.ID)">删除</el-button>
+            <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination style="margin-top:20px" :current-page="searchForm.page" :page-size="searchForm.size"
+                     :total="total"
+                     @current-change="handleCurrentChange"/>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {useRouter} from 'vue-router'
+import contact from "../../api/contact.js";
+
+const router = useRouter();
+// Dom 挂载之后
+onMounted(() => {
+  getContactAll();
+})
+// 资源数据
+const typeMapping = {
+  recruit: '招募',
+  about: '关于我们',
+}
+const showUpload = ref(false);
+const showUploadDialog = ref(false);
+let tableData = ref([]);
+let total = ref(0);
+const toggleUpload = () => {
+  showUpload.value = !showUpload.value;
+};
+// 搜索条件
+const searchForm = reactive({
+  page: 1,
+  size: 10,
+  desc: 'created_at desc'
+})
+// 获取资源列表
+const getContactAll = async () => {
+  const res = await contact.getAllContact(searchForm);
+  tableData.value = res.data.Data.Data;
+  total.value = res.data.Data.Size;
+}
+
+const handleCurrentChange = (current) => {
+  searchForm.page = current;
+  getContactAll();
+}
+const searchUser = () => {
+  searchForm.current = 1;
+  getContactAll();
+}
+// 删除资源信息
+const deleteProduct = (id) => {
+  ElMessageBox.confirm(
+      '确定要删除该资源信息吗?',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    const res = await contact.deleteContact({id: id});
+    if (res.data.code === 200) {
+      ElMessage.success("删除成功")
+      await getContactAll();
+    } else {
+      ElMessage.error(res.data.Msg)
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消删除',
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>