新闻管理，数据展示

src/api/dataModel.js

@@ -0,0 +1,20 @@
+import http from '../utils/http/http.js'
+// 获取数据资源列表
+const  getAllData=  (params) => {
+    return http.get('/data', params)
+};
+// 添加数据
+const  addData= (params) => {
+    return http.post('/data', params)
+};
+// 修改数据
+const  updateData=(params) => {
+    return http.put('/data', params)
+};
+// 删除数据
+const  deleteData= (params) => {
+    return http.del('/data', params)
+}
+export default {
+    getAllData, addData, updateData, deleteData
+}

src/api/news.js

@@ -0,0 +1,27 @@
+import http from '../utils/http/http.js'
+// 获取资源列表
+const  getAllNew=  (params) => {
+    return http.post('/news', params)
+};
+// 获取资源详情
+const  getNewDetail= (params) => {
+    return http.get('/news', params)
+};
+// 添加资源
+const   addNew= (params) => {
+    return http.post('/addnews', params)
+};
+// 修改资源
+const   updateNew=(params) => {
+    return http.put('/news', params)
+};
+// 删除资源
+const   deleteNew= (params) => {
+    return http.del('/news', params)
+}
+const   getnewstype= (params) => {
+    return http.get('/newstype', params)
+}
+export default {
+    getAllNew, getNewDetail, addNew, updateNew, deleteNew,getnewstype
+}

src/router/index.js

@@ -105,6 +105,41 @@ const routes = [
                 },
                 component: () => import('../view/resource/Detail.vue'),
             },
+            {
+                path: '/data/list',
+                meta: {
+                    title: '数据大屏展示'
+                },
+                component: () => import('../view/dataModel/data.vue'),
+            },
+            {
+                path: '/data/list',
+                meta: {
+                    title: '数据大屏展示'
+                },
+                component: () => import('../view/dataModel/data.vue'),
+            },
+            {
+                path: '/news/list',
+                meta: {
+                    title: '获取所有新闻'
+                },
+                component: () => import('../view/news/news.vue'),
+            },
+            {
+                path: '/news/add',
+                meta: {
+                    title: '添加新闻'
+                },
+                component: () => import('../view/news/add.vue'),
+            },
+            {
+                path: '/news/detail',
+                meta: {
+                    title: '获取新闻详情'
+                },
+                component: () => import('../view/news/Detail.vue'),
+            },
         ]
     },
 ]

src/view/Home.vue

@@ -71,6 +71,18 @@
                         </el-icon>
                         <span>服务管理</span>
                       </el-menu-item>
+                      <el-menu-item index="/data/list" @click="saveActiveNav('/data/list')">
+                        <el-icon>
+                          <user />
+                        </el-icon>
+                        <span>数据大屏展示</span>
+                      </el-menu-item>
+                      <el-menu-item index="/news/list" @click="saveActiveNav('/news/list')">
+                        <el-icon>
+                          <user />
+                        </el-icon>
+                        <span>新闻管理</span>
+                      </el-menu-item>
                     </el-menu>
                 </el-aside>
                 <el-container>

src/view/dataModel/data.vue

@@ -0,0 +1,183 @@
+<template>
+    <el-card class="box-card">
+        <template #header>
+            <div class="card-headers">
+                <span>数据展示</span>
+                <el-button size="mini" style="float:right" type="primary" @click="updateProduct">修改</el-button>
+            </div>
+        </template>
+        <el-form>
+            <div class="card-header" style="width: 500px;">
+                <span>覆盖区域:</span>
+                <el-form-item label="省区:">
+                    <el-input-number v-model="tableData.provinces" />
+                </el-form-item>
+                <el-form-item label="地州:">
+                    <el-input-number v-model="tableData.prefecture" />
+                </el-form-item>
+                <el-form-item label="县份:">
+                    <el-input-number v-model="tableData.counties"></el-input-number>
+                </el-form-item>
+            </div>
+            <div class="card-header" style="width: 500px;">
+                <span>覆盖领域:</span>
+                <el-form-item label="医院:">
+                    <el-input-number v-model="tableData.hospital"></el-input-number>
+                </el-form-item>
+                <el-form-item label="疾控中心:">
+                    <el-input-number v-model="tableData.cdc"></el-input-number>
+                </el-form-item>
+                <el-form-item label="疾控注射点:">
+                    <el-input-number v-model="tableData.cdc_injection_sites"></el-input-number>
+                </el-form-item>
+                <el-form-item label="医药公司:">
+                    <el-input-number v-model="tableData.pharmaceutical_companies"></el-input-number>
+                </el-form-item>
+                <el-form-item label="器械公司:">
+                    <el-input-number v-model="tableData.device_companies"></el-input-number>
+                </el-form-item>
+                <el-form-item label="连锁药店:">
+                    <el-input-number v-model="tableData.chain_pharmacies"></el-input-number>
+                </el-form-item>
+                <el-form-item label="门店数量:">
+                    <el-input-number v-model="tableData.number_of_stores"></el-input-number>
+                </el-form-item>
+                <el-form-item label="冷链物流公司:">
+                    <el-input-number v-model="tableData.cold_chain_logistics_company"></el-input-number>
+                </el-form-item>
+                <el-form-item label="药厂:">
+                    <el-input-number v-model="tableData.pharmaceutical"></el-input-number>
+                </el-form-item>
+            </div>
+            <div class="card-header" style="width: 500px;">
+                <span>监测对象:</span>
+                <el-form-item label="冷藏车:">
+                    <el-input-number v-model="tableData.refrigerated_trucks"></el-input-number>
+                </el-form-item>
+                <el-form-item label="冷链物流公司:">
+                    <el-input-number v-model="tableData.cold_chain_logistics_company"></el-input-number>
+                </el-form-item>
+                <el-form-item label="保温箱:">
+                    <el-input-number v-model="tableData.incubator"></el-input-number>
+                </el-form-item><el-form-item label="冷冻柜:">
+                    <el-input-number v-model="tableData.freezer"></el-input-number>
+                </el-form-item>
+                <el-form-item label="冷藏柜:">
+                    <el-input-number v-model="tableData.refrigerated_cabinets"></el-input-number>
+                </el-form-item>
+                <el-form-item label="阴凉柜:">
+                    <el-input-number v-model="tableData.shaded_cabinet"></el-input-number>
+                </el-form-item>
+                <el-form-item label="冷藏柜:">
+                    <el-input-number v-model="tableData.refrigerated_cabinets"></el-input-number>
+                </el-form-item>
+                <el-form-item label="冷库:">
+                    <el-input-number v-model="tableData.cold_storage"></el-input-number>
+                </el-form-item>
+                <el-form-item label="阴凉库:">
+                    <el-input-number v-model="tableData.shaded_storage"></el-input-number>
+                </el-form-item>
+                <el-form-item label="空  调:">
+                    <el-input-number v-model="tableData.airpacing"></el-input-number>
+                </el-form-item>
+                <el-form-item label="除湿机:">
+                    <el-input-number v-model="tableData.dehumidifiers"></el-input-number>
+                </el-form-item>
+            </div>
+            <div class="card-header" style="width: 500px;">
+                <span>管理效率:</span>
+                <el-form-item label="3D可视化平台:">
+                    <el-input-number v-model="tableData.dvisualization_platform"/>
+                </el-form-item>
+                <el-form-item label="大数据管理平台:">
+                    <el-input-number v-model="tableData.big_data_management_platform"></el-input-number>
+                </el-form-item>
+                <el-form-item label="冷链系列培训:">
+                    <el-input-number v-model="tableData.cold_chain_training" />
+                </el-form-item>
+                <el-form-item label="保温箱安全平台:">
+                    <el-input-number v-model="tableData.incubator_safety_platform"></el-input-number>
+                </el-form-item>
+                <el-form-item label="冷藏车安全平台:">
+                    <el-input-number v-model="tableData.safety_platform_for_refrigerated_trucks"></el-input-number>
+                </el-form-item>
+                <el-form-item label="售后预警服务:">
+                    <el-input-number v-model="tableData.after_sales_early_warning_service"></el-input-number>
+                </el-form-item>
+            </div>
+            <div class="card-header" style="width: 500px;">
+                <span>冷链验证:</span>
+                <el-form-item label="验证方案数量:">
+                    <el-input-number v-model="tableData.number_of_validation_scenarios"></el-input-number>
+                </el-form-item>
+                <el-form-item label="验证报告数量:">
+                    <el-input-number v-model="tableData.number_of_validation_reports"></el-input-number>
+                </el-form-item>
+            </div>
+            <div class="card-header" style=" width: 500px;">
+                <span>探头校准:</span>
+                <el-form-item label="探头数量:">
+                    <el-input-number v-model="tableData.number_of_probes"></el-input-number>
+                </el-form-item>
+            </div>
+        </el-form>
+    </el-card>
+</template>
+<script setup>
+import { onMounted, reactive } from 'vue';
+import dataModel from "../../api/dataModel.js";
+import { ElMessage } from "element-plus";
+
+const tableData = reactive({
+    provinces: 0,
+    prefecture: 0,
+    counties: 0,
+    hospital: 0,
+    cdc: 0,
+    cdc_injection_sites: 0,
+    pharmaceutical_companies: 0,
+    device_companies: 0,
+    chain_pharmacies: 0,
+    number_of_stores: 0,
+    cold_chain_logistics_company: 0,
+    pharmaceutical: 0,
+    refrigerated_trucks: 0,
+    incubator: 0,
+    freezer: 0,
+    refrigerated_cabinets: 0,
+    shaded_cabinet: 0,
+    cold_storage: 0,
+    shaded_storage: 0,
+    airpacing: 0,
+    dehumidifiers: 0,
+    dvisualization_platform: 0,
+    big_data_management_platform: 0,
+    cold_chain_training: 0,
+    incubator_safety_platform: 0,
+    safety_platform_for_refrigerated_trucks: 0,
+    after_sales_early_warning_service: 0,
+    number_of_validation_scenarios: 0,
+    number_of_validation_reports: 0,
+    number_of_probes: 0
+})
+const getDataModel = async () => {
+    const res = await dataModel.getAllData()
+    Object.assign(tableData, res.data.Data);
+    console.log(res.data.Data)
+}
+const updateProduct = async () => {
+    const res = await dataModel.updateData(tableData)
+    if (res.data.Code === 200) {
+        ElMessage.success("修改成功")
+    } else {
+        ElMessage.error(res.data.Msg)
+    }
+    console.log(res.data.Data)
+}
+onMounted(() => {
+    getDataModel();
+})
+</script>
+<style scoped>
+
+</style>

src/view/news/Detail.vue

@@ -0,0 +1,123 @@
+<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="updateProduct">修改</el-button>
+        </div>
+      </template>
+      <el-form>
+        <el-form-item label="新闻标题:">
+          <el-input v-model="newsDetail.title"></el-input>
+        </el-form-item>
+        <el-form-item label="图片:">
+          <el-image v-model="newsDetail.image" style="width: 100px; height: 100px; margin-right: 10px"
+            fit="cover"></el-image>
+          <el-upload :http-request="httpRequest" multiple :show-file-list="true" list-type="picture-card">
+            <el-icon>
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="分类:">
+          <el-select @click="getnewstype" v-model="newsDetail.types"  placeholder="请选择分类" size="large" style="width: 240px">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="简介:">
+          <el-input v-model="newsDetail.synopsis"></el-input>
+        </el-form-item>
+        <el-form-item label="详情:">
+          <editor-with-binding v-model="newsDetail.detail" />
+        </el-form-item>
+
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, reactive ,ref} from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+import product from "../../api/product.js";
+import Editor from "../editor.vue";
+import { ElMessage } from "element-plus";
+import EditorWithBinding from "../EditorWithBinding.vue";
+import news from '../../api/news.js';
+import resource from "../../api/resource.js";
+
+const route = useRoute();
+const router = useRouter();
+const newsDetail = reactive({
+  ID: '',
+  detail: '',
+  synopsis: '',
+  image: '',
+  is_active: '',
+  is_index: '',
+  synopsis: '',
+  instructions: '',
+  title: '',
+  types: '',
+})
+const value = ref('')
+const newstype=reactive({})
+const options = [
+  {
+    value: 'firm',
+    label: '公司新闻',
+  },
+  {
+    value: 'industry',
+    label: '行业新闻',
+  },
+]
+const getnewstype =async()=>{
+  const res= await news.getnewstype()
+  newstype.value=res.data.Data
+}
+function httpRequest(option) {
+//将图片存到数组中
+  fileList.value.push(option)
+}
+const fileList = ref([])
+
+const updateProduct = async () => {
+  let dataForm = new FormData();
+  dataForm.append('types', "serve")
+  //将图片的二进制通过表单的形式发送到后台
+  fileList.value.forEach((it, index) => {
+    dataForm.append('file', it.file)
+  })
+  const fileRes = await resource.uploadResource(dataForm)
+  newsDetail.image = fileRes.data.Data
+  const res = await news.updateNew({
+    id: parseInt(route.query.id),
+    detail: newsDetail.detail,
+    synopsis: newsDetail.synopsis,
+    title: newsDetail.title,
+    types: newsDetail.types,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("修改成功")
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+
+onBeforeMount(async () => {
+  if (route.query.id) {
+    const res = await news.getNewDetail({ id: route.query.id })
+    console.log(res.data)
+    Object.assign(newsDetail, res.data.Data);
+  }
+})
+onMounted(async()=>{
+  await getnewstype()
+})
+</script>
+
+<style lang="scss" scoped></style>

src/view/news/add.vue

@@ -0,0 +1,115 @@
+<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;margin-right: 10px;" type="primary" @click="updateProduct">添加</el-button>
+        </div>
+      </template>
+      <el-form>
+        <el-form-item label="新闻标题:">
+          <el-input v-model="newsDetail.title"></el-input>
+        </el-form-item>
+        <el-form-item label="图片:">
+          <el-image v-if="newsDetail.image" v-model="newsDetail.image" style="width: 100px; height: 100px; margin-right: 10px"
+            fit="cover"></el-image>
+          <el-upload :http-request="httpRequest" multiple :show-file-list="true" list-type="picture-card">
+            <el-icon>
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="分类:">
+          <el-select @click="getnewstype" v-model="newsDetail.types"  placeholder="请选择分类" size="large" style="width: 240px">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="简介:">
+          <el-input v-model="newsDetail.synopsis"></el-input>
+        </el-form-item>
+        <el-form-item label="详情:">
+          <editor-with-binding v-model="newsDetail.detail" />
+        </el-form-item>
+
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, reactive ,ref} from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+import product from "../../api/product.js";
+import Editor from "../editor.vue";
+import { ElMessage } from "element-plus";
+import EditorWithBinding from "../EditorWithBinding.vue";
+import news from '../../api/news.js';
+import resource from "../../api/resource.js";
+
+const route = useRoute();
+const router = useRouter();
+const newsDetail = reactive({
+  ID: '',
+  detail: '',
+  synopsis: '',
+  image: '',
+  is_active: '',
+  is_index: '',
+  synopsis: '',
+  instructions: '',
+  title: '',
+  types: '',
+})
+const value = ref('')
+const newstype=reactive({})
+const options = [
+  {
+    value: 'firm',
+    label: '公司新闻',
+  },
+  {
+    value: 'industry',
+    label: '行业新闻',
+  },
+]
+const getnewstype =async()=>{
+  const res= await news.getnewstype()
+  newstype.value=res.data.Data
+}
+function httpRequest(option) {
+//将图片存到数组中
+  fileList.value.push(option)
+}
+const fileList = ref([])
+
+const updateProduct = async () => {
+  let dataForm = new FormData();
+  dataForm.append('types', "serve")
+  //将图片的二进制通过表单的形式发送到后台
+  fileList.value.forEach((it, index) => {
+    dataForm.append('file', it.file)
+  })
+  const fileRes = await resource.uploadResource(dataForm)
+  newsDetail.image = fileRes.data.Data
+  const res = await news.addNew({
+    detail: newsDetail.detail,
+    synopsis: newsDetail.synopsis,
+    title: newsDetail.title,
+    types: newsDetail.types,
+  });
+  if (res.data.Code === 200) {
+    ElMessage.success("修改成功")
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+
+onMounted(async()=>{
+  await getnewstype()
+})
+</script>
+
+<style lang="scss" scoped></style>

src/view/news/news.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <el-card>
+      <el-button type="primary"
+                 @click="() => router.push({ path: '/news/add'})">添加新闻
+      </el-button>
+      <!-- 添加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 label="图片" width="120">
+          <template #default="scope">
+            <img :src="imageUrlWithPrefix(scope.row.image)" alt="图片" style="max-width: 100%; height: auto;">
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="新闻标题" width="180">
+          <template #default="scope">
+            {{ scope.row.title }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型" width="180">
+          <template #default="scope">
+            {{ typeMapping[scope.row.types] || '其他' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button type="danger" size="small" @click="deleteNews(scope.row.ID)">删除</el-button>
+            <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
+                        <el-button size="small"
+                                   @click="() => router.push({ path: '/news/detail', query: { id: 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 resource from "../../api/resource.js";
+import product from "../../api/product.js";
+import news from "../../api/news.js";
+const router = useRouter();
+// Dom 挂载之后
+onMounted(() => {
+  getNewsAll();
+})
+// 资源数据
+const typeMapping = {
+  firm: '公司新闻',
+  industry: '行业新闻',
+}
+const productDetail = reactive({
+  ID: '',
+  type: '',
+  isIndex:'',
+  ptype: '',
+  title: '',
+  parentId:'',
+  synopsis: '',
+  detail: '',
+  url: '',
+  product_introduction: '',
+  technical_parameters: '',
+  instructions: '',
+  supporting_software: '',
+  optional_accessories: '',
+  is_active: '',
+})
+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: 5,
+  desc: ''
+})
+// 获取资源列表
+const getNewsAll = async () => {
+  const res = await news.getAllNew(searchForm);
+  console.log(res.data.Data.Data);
+  tableData.value = res.data.Data.Data;
+  total.value = res.data.Data.Size;
+}
+const handleSwitchChange = async (row) => {
+  try {
+    // 这里根据实际情况调用你的修改方法，例如 updateProduct
+    await updateProduct(row.ID, row.isIndex);
+    await getNewsAll();
+  } catch (error) {
+    ElMessage.error('更新状态时出错');
+  }
+}
+const updateProduct = async (id,isIndex) => {
+  const res = await product.updateProduct({id: id, isIndex: isIndex});
+  if (res.data.Code === 200) {
+    ElMessage.success("修改成功")
+    await getProductAll();
+  } else {
+    ElMessage.error(res.data.Msg)
+  }
+}
+
+function imageUrlWithPrefix(url) {
+  const prefix = 'http://localhost:8080'; // 这里替换为你的图片服务器基础路径
+  return prefix + url;
+}
+
+const handleSizeChange = (size) => {
+  searchForm.size = size;
+  getNewsAll();
+}
+const handleCurrentChange = (current) => {
+  searchForm.page = current;
+  getNewsAll();
+}
+const searchUser = () => {
+  searchForm.current = 1;
+  getNewsAll();
+}
+// 删除资源信息
+const deleteNews = (id) => {
+  ElMessageBox.confirm(
+      '确定要删除该资源信息吗?',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    const res = await news.deleteNew({id: id});
+    if (res.data.code === 200) {
+      ElMessage.success("删除成功")
+      await getNewsAll();
+    } else {
+      ElMessage.error(res.data.Msg)
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消删除',
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

src/view/product/add.vue

@@ -13,34 +13,30 @@
           <el-input v-model="productDetail.title"></el-input>
         </el-form-item>
         <el-form-item label="图片:">
-          <el-upload
-              :http-request="httpRequest"
-              multiple
-              :show-file-list="true"
-              list-type="picture-card"
-          >
+          <el-upload :http-request="httpRequest" multiple :show-file-list="true" list-type="picture-card">
             <el-icon>
-              <Plus/>
+              <Plus />
             </el-icon>
           </el-upload>
         </el-form-item>
         <el-form-item label="类型:">
           <el-select v-model="productDetail.type" @change="handleTypeChange" placeholder="请选择添加类型">
-            <el-option label="服务" value="serve"/>
-            <el-option label="产品" value="product"/>
+            <el-option label="服务" value="serve" />
+            <el-option label="产品" value="product" />
           </el-select>
         </el-form-item>
         <el-form-item label="产品类型:">
-          <el-select v-model="productDetail.ptype" :disabled="productDetail.type === 'serve'"  placeholder="请选择软件或者硬件" style="width: 20vw">
-            <el-option label="硬件" value="hardware"/>
-            <el-option label="软件" value="software"/>
+          <el-select v-model="productDetail.ptype" :disabled="productDetail.type === 'serve'" placeholder="请选择软件或者硬件"
+            style="width: 20vw">
+            <el-option label="硬件" value="hardware" />
+            <el-option label="软件" value="software" />
           </el-select>
         </el-form-item>
         <el-form-item label="是否首页展示:">
-            <el-select v-model="productDetail.isIndex"  placeholder="请选择是否首页显示" style="width: 20vw">
-              <el-option label="是" value="true"/>
-              <el-option label="否" value="false"/>
-            </el-select>
+          <el-select v-model="productDetail.isIndex" placeholder="请选择是否首页显示" style="width: 20vw">
+            <el-option label="是" value="true" />
+            <el-option label="否" value="false" />
+          </el-select>
         </el-form-item>
         <el-form-item label="简介:">
           <el-input v-model="productDetail.synopsis"></el-input>
@@ -69,12 +65,12 @@
 </template>
 
 <script setup>
-import {onBeforeMount, reactive, ref} from 'vue';
-import {useRoute, useRouter} from 'vue-router'
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
 import product from "../../api/product.js";
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
 import EditorWithBinding from "../EditorWithBinding.vue";
-import {Plus} from "@element-plus/icons-vue";
+import { Plus } from "@element-plus/icons-vue";
 import resource from "../../api/resource.js";
 
 const route = useRoute();
@@ -101,7 +97,7 @@ const handleTypeChange = (value) => {
 const fileList = ref([])
 
 function httpRequest(option) {
-//将图片存到数组中
+  //将图片存到数组中
   fileList.value.push(option)
 }
 
@@ -121,7 +117,7 @@ const addProduct = async () => {
     url: productDetail.url,
     ptype: productDetail.ptype,
     type: productDetail.type,
-    isIndex: productDetail.isIndex,
+    isIndex: Boolean(productDetail.isIndex),
     product_introduction: productDetail.product_introduction,
     technical_parameters: productDetail.technical_parameters,
     instructions: productDetail.instructions,
@@ -130,20 +126,31 @@ const addProduct = async () => {
   });
   if (res.data.Code === 200) {
     ElMessage.success("添加成功")
-    productDetail.clear()
+    Object.assign(productDetail, {
+      title: '',
+      synopsis: '',
+      detail: '',
+      ptype: '',
+      type: '',
+      url: '',
+      isIndex: '',
+      product_introduction: '',
+      technical_parameters: '',
+      instructions: '',
+      supporting_software: '',
+      optional_accessories: '',
+    });
   } else {
     ElMessage.error(res.data.Msg)
   }
 }
 onBeforeMount(async () => {
   if (route.query.id) {
-    const res = await product.getProductDetail({id: route.query.id})
+    const res = await product.getProductDetail({ id: route.query.id })
     console.log(res.data)
     Object.assign(productDetail, res.data.Data);
   }
 })
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/view/serve/Detail.vue

@@ -31,6 +31,22 @@
             </el-icon>
           </el-upload>
         </el-form-item>
+        <el-form-item label="分类:">
+          <el-select
+              @click="getServeType"
+              v-model="serveDetail.product_id"
+              clearable
+              placeholder="选择分类信息"
+              style="width: 240px"
+          >
+            <el-option
+                v-for="item in ServeType.value"
+                :key="item.ID"
+                :label="item.title"
+                :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item label="详情:">
           <EditorWithBinding v-model="serveDetail.detail"/>
         </el-form-item>
@@ -40,7 +56,7 @@
 </template>
 
 <script setup>
-import {nextTick, onBeforeMount, reactive, ref} from 'vue';
+import {nextTick, onBeforeMount, onMounted, reactive, ref} from 'vue';
 import {useRoute, useRouter} from 'vue-router'
 import serve from "../../api/serve.js";
 import {ElMessage} from "element-plus";
@@ -49,6 +65,7 @@ import {Plus} from "@element-plus/icons-vue";
 import resource from "../../api/resource.js";
 
 const fileList = ref([])
+const ServeType = reactive([{}])
 
 const route = useRoute();
 const router = useRouter();
@@ -60,12 +77,15 @@ const serveDetail = reactive({
   image: '',
   product_id: ''
 })
-
+const getServeType = async () => {
+  const res = await serve.GetServiceType();
+  ServeType.value = res.data.Data;
+  console.log(ServeType.value)
+}
 function httpRequest(option) {
 //将图片存到数组中
   fileList.value.push(option)
 }
-
 const updateServe = async () => {
   let dataForm = new FormData();
   dataForm.append('types', "serve")
@@ -101,7 +121,9 @@ onBeforeMount(async () => {
     Object.assign(serveDetail, res.data.Data);
   }
 })
-
+onMounted(async () => {
+  await getServeType()
+})
 </script>
 
 <style lang="scss" scoped>

src/view/serve/serves.vue

@@ -21,21 +21,6 @@
             {{ scope.row.synopsis }}
           </template>
         </el-table-column>
-        <el-table-column prop="type" label="归属" width="300">
-          <el-select
-              v-model="value"
-              placeholder="Select"
-              size="large"
-              style="width: 240px"
-          >
-            <el-option
-                v-for="item in ServeType.value"
-                :key="item.id"
-                :label="item.title"
-                :value="item.title"
-            />
-          </el-select>
-        </el-table-column>
         <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button type="danger" size="small" @click="deleteServe(scope.row.ID)">删除</el-button>