From 4f594b0bfd1bdbeb2ee30c959e3416723749f2a7 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Sat, 21 Sep 2024 21:59:12 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20=E6=96=87=E7=AB=A0=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?crud=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/article/index.js                |  29 ++++
 src/api/research-fund/index.js          |   8 +
 src/components/Tinymce.vue              |   2 +-
 src/views/article-management/add.vue    | 202 ++++++++++++++++++++++++
 src/views/article-management/detail.vue |  70 ++++++++
 src/views/article-management/index.vue  |  80 ++++------
 src/views/home/index.vue                | 199 +++--------------------
 7 files changed, 362 insertions(+), 228 deletions(-)
 create mode 100644 src/api/article/index.js
 create mode 100644 src/views/article-management/add.vue
 create mode 100644 src/views/article-management/detail.vue

diff --git a/src/api/article/index.js b/src/api/article/index.js
new file mode 100644
index 0000000..e13532e
--- /dev/null
+++ b/src/api/article/index.js
@@ -0,0 +1,29 @@
+import request from '@/utils/request.js'
+
+
+export const getArticleDetail = (articleId) => {
+  return request({
+    url: `/workflow/mosr/article/${articleId}`,
+    method: "get"
+  });
+};
+export const addArticle= (data) => {
+  return request({
+    url: '/workflow/mosr/article/add',
+    method: "post",
+    data
+  });
+};
+export const editArticle= (data) => {
+  return request({
+    url: '/workflow/mosr/article/update',
+    method: "post",
+    data
+  });
+};
+export const deleteArticle = (articleIds) => {
+  return request({
+    url: `/workflow/mosr/article/${articleIds}`,
+    method: "delete"
+  });
+};
diff --git a/src/api/research-fund/index.js b/src/api/research-fund/index.js
index 9470630..15be2de 100644
--- a/src/api/research-fund/index.js
+++ b/src/api/research-fund/index.js
@@ -1,4 +1,12 @@
 import request from '@/utils/request.js'
+
+
+export const getResearchFundChart = () => {
+  return request({
+    url: '/workflow/mosr/rd/home',
+    method: 'get',
+  })
+}
 export const getResearchFundDetail = (rdFundId) => {
   return request({
     url: `/workflow/mosr/rd/${rdFundId}`,
diff --git a/src/components/Tinymce.vue b/src/components/Tinymce.vue
index 265f987..85efecf 100644
--- a/src/components/Tinymce.vue
+++ b/src/components/Tinymce.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tinymce-boxz">
+  <div class="tinymce-boxz" style="width: 100%">
     <Editor v-model="content" :init="init"/>
   </div>
 </template>
diff --git a/src/views/article-management/add.vue b/src/views/article-management/add.vue
new file mode 100644
index 0000000..544ee82
--- /dev/null
+++ b/src/views/article-management/add.vue
@@ -0,0 +1,202 @@
+<template>
+  <div v-loading="loading" class="add-block">
+    <baseTitle title="文章信息录入"></baseTitle>
+    <el-form :model="formData" ref="fundForm" :rules="rules"  style="margin-left: 5px;margin-bottom: -18px">
+      <el-row gutter="30">
+        <el-col :span="6" style="margin-left: 10px">
+            <el-form-item label="文章标题" prop="articleTitle">
+              <el-input v-model="formData.articleTitle" placeholder="请输入文章标题" clearable></el-input>
+            </el-form-item>
+        </el-col>
+        <el-col :span="6">
+            <el-form-item label="文章类型" prop="articleType">
+              <el-select v-model="formData.articleType" placeholder="请选择文章类型" clearable filterable>
+                <el-option
+                    v-for="item in cacheStore.getDict('article_type')"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+        </el-col>
+        <el-col :span="6" >
+          <el-form-item label="备注" prop="remarks">
+            <el-input v-model="formData.remarks" placeholder="请输入备注" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" style="margin-left: 10px">
+          <el-form-item label="文章内容" prop="articleContent">
+            <Tinymce v-model:value="formData.articleContent" :height="500" v-if="showTinymce" :toolbar="['undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image']" />
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+    <div class="oper-page-btn">
+      <el-button color="#DED0B2" v-if="routerName === 'Article/add'" @click="handleSubmit(fundForm)">提交</el-button>
+      <el-button color="#DED0B2" v-else @click="handleResubmit">重新提交</el-button>
+      <el-button @click="handleBack">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {ElNotification} from "element-plus";
+import {addArticle, editArticle, getArticleDetail} from "@/api/article";
+import {useTagsView} from '@/stores/tagsview.js'
+import { useCacheStore } from "@/stores/cache.js";
+const cacheStore = useCacheStore();
+const tagsViewStore = useTagsView()
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false)
+const showTinymce = ref(true)
+const fundForm = ref()
+const formData = ref({})
+const routerName = ref(router.currentRoute.value.name)
+const rules = reactive({
+  articleTitle: [{required: true, message: '请输入文章标题', trigger: ['blur', 'change']}],
+  articleType: [{required: true, message: '请输入文章类型', trigger: ['blur', 'change']}],
+  articleContent: [{required: true, message: '请输入文章内容', trigger: ['blur', 'change']}],
+})
+
+const handleBack = () => {
+  history.back()
+}
+
+const submitParam = (item) => {
+  return {
+    articleContent: item.articleContent,
+    articleTitle: item.articleTitle,
+    articleType: item.articleType,
+    remarks: item.remarks,
+  }
+}
+const handleSubmit = async (instance) => {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) {
+      ElNotification({
+        title: '提示',
+        message: '请完善数据,再提交!',
+        type: 'error'
+      })
+      return;
+    }
+    const {msg, code} = await addArticle(submitParam(formData.value))
+    ElNotification({
+      title: '提示',
+      message: msg,
+      type: code === 1000 ? 'success' : 'error'
+    })
+    if (code === 1000) {
+      tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+      await router.push({
+        name: 'Manage'
+      })
+    }
+  })
+}
+const handleResubmit = () => {
+  if (!route.query.id) return
+  let params = {
+    articleId: route.query.id,
+    ...submitParam(formData.value)
+  }
+  editArticle(params).then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+      router.push({
+        name: 'Manage'
+      })
+    }
+  })
+}
+const getDetailInfo = async () => {
+  loading.value = true
+  getArticleDetail(route.query.id).then(res => {
+    if (res.code === 1000) {
+      formData.value = res.data
+      loading.value = false
+      showTinymce.value=false
+      nextTick(() => {
+        showTinymce.value=true
+      })
+    }else{
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+    }
+  })
+}
+onMounted(async () => {
+  if (route.query.id) {
+    await getDetailInfo()
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.company-select {
+  :deep(.el-form-item__content .el-select__wrapper ) {
+    width: 750px;
+  }
+
+  .company-style {
+    //width: 98%;
+    min-height: 30px;
+    max-height: 60px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .company {
+    color: #fff;
+    height: auto;
+  }
+}
+:deep(.el-table--fit ) {
+  height: 300px !important;
+}
+
+.add-block {
+  padding: 0 30px;
+}
+
+:deep(.el-input-number) {
+  width: 88.5%;
+  .el-input__wrapper{
+    padding: 1px 11px!important;
+  }
+  .el-input__inner {
+    text-align: left;
+  }
+}
+
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -20px !important;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -10px !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/article-management/detail.vue b/src/views/article-management/detail.vue
new file mode 100644
index 0000000..e279379
--- /dev/null
+++ b/src/views/article-management/detail.vue
@@ -0,0 +1,70 @@
+<template>
+  <div v-loading="loading" class="article-detail">
+    <baseTitle title="文章详情"></baseTitle>
+    <el-form :model="formData" >
+      <el-row gutter="20" style="margin-left: 5px">
+        <el-col :span="6">
+          <el-form-item label="文章标题">
+            <span>{{ formData.articleTitle }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="文章类型">
+            <Tag dictType="article_type" :value="formData.articleType"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="创建时间">
+            <span>{{ formData.createTime }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="备注">
+            <span>{{ formData.remarks }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="文章内容">
+            <div v-html="formData.articleContent"></div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import {ElNotification} from "element-plus";
+import {getArticleDetail} from "@/api/article";
+const loading=ref(false)
+const formData=ref({})
+const route = useRoute()
+const getDetailInfo = async () => {
+  loading.value = true
+  getArticleDetail(route.query.id).then(res => {
+    if (res.code === 1000) {
+      formData.value = res.data
+      loading.value = false
+    }else{
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+    }
+  })
+}
+onMounted(async () => {
+  if (route.query.id) {
+    await getDetailInfo()
+  }
+})
+</script>
+
+<style scoped>
+.article-detail{
+  padding: 0 30px;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/article-management/index.vue b/src/views/article-management/index.vue
index a9102e3..20b8f82 100644
--- a/src/views/article-management/index.vue
+++ b/src/views/article-management/index.vue
@@ -10,14 +10,14 @@
 
 <script setup lang="jsx">
 import {ElNotification} from "element-plus";
-import {deleteAllocation} from "@/api/expense-manage";
+import {deleteArticle} from "@/api/article";
 import fvSelect from '@/fvcomponents/fvSelect/index.vue'
 
 const router = useRouter();
 const researchFundSearchConfig = reactive([
   {
     label: '文章标题',
-    prop: 'projectName',
+    prop: 'articleTitle',
     component: 'el-input',
     props: {
       placeholder: '请输入文章标题查询',
@@ -28,7 +28,7 @@ const researchFundSearchConfig = reactive([
   },
   {
     label: '文章类型',
-    prop: 'state',
+    prop: 'articleType',
     component: shallowRef(fvSelect),
     props: {
       placeholder: '请选择文章类型',
@@ -41,30 +41,17 @@ const researchFundSearchConfig = reactive([
   },
   {
     label: '时间',
-    prop: 'apportionmentMonth',
+    prop: 'createTime',
     component: 'el-date-picker',
     props: {
       placeholder: '请选择时间',
       clearable: true,
-      type: 'month',
-      format: 'YYYY-MM',
-      valueFormat: "YYYY-MM"
+      type: 'date',
+      format: 'YYYY-MM-DD',
+      valueFormat: "YYYY-MM-DD"
     },
     colProps: {}
   },
-  {
-    label: '阅读状态',
-    prop: 'state',
-    component: shallowRef(fvSelect),
-    props: {
-      placeholder: '请选择阅读状态',
-      clearable: true,
-      filterable: true,
-      checkStrictly: true,
-      cacheKey: 'read_state',
-      remote: true
-    }
-  },
 ])
 const tableIns = ref()
 const researchFundTableConfig = reactive({
@@ -80,41 +67,33 @@ const researchFundTableConfig = reactive({
       }
     },
     {
-      prop: 'shareName',
+      prop: 'articleTitle',
       label: '文章标题',
       align: 'center'
     },
     {
-      prop: 'state',
+      prop: 'articleType',
       label: '文章类型',
       align: 'center',
       showOverflowTooltip: false,
       currentRender: ({row, index}) => {
-        if (row.state == undefined || row.state == 0) {
+        if (row.articleType == undefined || row.articleType == null) {
           return '--'
         } else {
-          return (<Tag dictType={'article_type'} value={row.state}/>)
+          return (<Tag dictType={'article_type'} value={row.articleType}/>)
         }
       }
     },
     {
-      prop: 'state',
-      label: '阅读状态',
-      align: 'center',
-      showOverflowTooltip: false,
-      currentRender: ({row, index}) => {
-        if (row.state == undefined || row.state == 0) {
-          return '--'
-        } else {
-          return (<Tag dictType={'read_state'} value={row.state}/>)
-        }
-      }
-    },
-    {
-      prop: 'apportionmentMonth',
+      prop: 'createTime',
       label: '时间',
       align: 'center'
     },
+    {
+      prop: 'remarks',
+      label: '备注',
+      align: 'center'
+    },
     {
       prop: 'oper',
       label: '操作',
@@ -123,12 +102,8 @@ const researchFundTableConfig = reactive({
       showOverflowTooltip: false,
       currentRender: ({row, index}) => {
         let btn = []
-        let buttons
-        if (row.buttons) {
-          buttons = new Set(Array.from(row.buttons))
-        }
-        btn.push({label: '详情', prem: ['mosr:requirement:info'], func: () => handleDetail(row), type: 'primary'})
-        btn.push({label: '编辑', prem: ['mosr:requirement:resubmit'], func: () => handleEdit(row), type: 'primary'})
+        btn.push({label: '详情', func: () => handleDetail(row), type: 'primary'})
+        btn.push({label: '编辑',  func: () => handleEdit(row), type: 'primary'})
         return (
             <div style={{width: '100%'}}>
               {
@@ -144,16 +119,15 @@ const researchFundTableConfig = reactive({
                 ))
               }
               {
-                <popover-delete name={row.shareName} type={'研发投入资金'} btnType={'danger'}
+                <popover-delete name={row.articleTitle} type={'文章'} btnType={'danger'}
                                 onDelete={() => handleDelete(row)}/>
-
               }
             </div>
         )
       }
     }
   ],
-  api: '',
+  api: '/workflow/mosr/article/list',
   btns: [
     {name: '新增', key: 'add', color: '#DED0B2'}
   ],
@@ -178,28 +152,28 @@ const headBtnClick = (key) => {
 }
 const handleAdd = () => {
   router.push({
-    name: 'Share/add',
+    name: 'Article/add',
     query: {}
   })
 }
 const handleDetail = (row) => {
   router.push({
-    name: 'Share/detail',
+    name: 'Article/detail',
     query: {
-      id: row.allocationId
+      id: row.articleId
     }
   })
 }
 const handleEdit = (row) => {
   router.push({
-    name: 'Share/edit',
+    name: 'Article/edit',
     query: {
-      id: row.allocationId
+      id: row.articleId
     }
   })
 }
 const handleDelete = (row) => {
-  deleteAllocation(row.allocationId).then(res => {
+  deleteArticle(row.articleId).then(res => {
     ElNotification({
       title: '提示',
       message: res.msg,
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index eee3c49..7e2692d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -281,14 +281,13 @@ import * as echarts from 'echarts'
 import {toThousands} from "@/utils/changePrice.js";
 import {ElNotification} from "element-plus";
 import {getHomeInfo} from "@/api/home";
+import {getResearchFundChart} from "@/api/research-fund";
 
 const AuthStore = useAuthStore()
 const router = useRouter()
 const activeName = ref('first')
 const docActiveTab = ref('first')
 const totalMoney = ref('45000')
-const tableConfigBacklogRef = ref()
-const tableConfigReportRef = ref()
 const moneyData = ref([
   {
     companyName: '智汇未来科技公司',
@@ -483,174 +482,7 @@ const problemList = ref([
 
 ])
 const doneList = ref([])
-const todoNum = ref(0)
 const reportNum = ref(0)
-const auths = {
-  edit: ['mosr:requirement:resubmit'],
-  detail: ['mosr:requirement:info'],
-  add: ['mosr:requirement:add'],
-  del: ['mosr:requirement:del'],
-  report: ['mosr:collect:reported'],
-}
-const tableConfigBacklog = reactive({
-  columns: [
-    {
-      prop: 'index',
-      type: 'index',
-      label: '序号',
-      align: 'center',
-      width: 85,
-      index: index => {
-        return (tableConfigBacklogRef.value.getQuery().pageNum - 1) * tableConfigBacklogRef.value.getQuery().pageSize + index + 1
-      }
-    },
-    {
-      prop: 'targetName',
-      label: '流程名称',
-      align: 'center',
-    },
-    {
-      prop: 'initiatorName',
-      label: '发起人',
-      align: 'center',
-    },
-    {
-      prop: 'targetState',
-      label: '流程类型',
-      align: 'center',
-      showOverflowTooltip: false,
-      currentRender: ({row, index}) => {
-        if (row.targetState !== null || row.targetState !== undefined) {
-          return (<Tag dictType={'todo_type'} value={row.targetState}/>)
-        } else {
-          return '--'
-        }
-      }
-    },
-    {
-      prop: 'submitTime',
-      label: '提交时间',
-      align: 'center',
-    },
-    {
-      prop: 'taskName',
-      label: '当前节点',
-      align: 'center',
-    },
-    {
-      prop: 'oper',
-      label: '操作',
-      fixed: 'right',
-      width: '150',
-      align: 'center',
-      showOverflowTooltip: false,
-      currentRender: ({row, index}) => {
-        return (
-            <div>
-              <el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
-            </div>
-        )
-      }
-    }
-  ],
-  api: '/workflow/mosr/process/task',
-  params: {},
-})
-const tableConfigReport = reactive({
-  columns: [
-    // {
-    //   type: 'selection',
-    //   prop: 'selection'
-    // },
-    {
-      prop: 'index',
-      type: 'index',
-      label: '序号',
-      align: 'center',
-      width: 85,
-      index: index => {
-        return (tableConfigReportRef.value.getQuery().pageNum - 1) * tableConfigReportRef.value.getQuery().pageSize + index + 1
-      }
-    },
-    {
-      prop: 'requirementName',
-      label: '征集名称',
-      align: 'center'
-    },
-    {
-      prop: 'collectType',
-      label: '征集类型',
-      align: 'center'
-    },
-    {
-      prop: 'companyName',
-      label: '征集公司',
-      align: 'center',
-      // currentRender: ({row, index}) => (
-      // <div style={{width: '300px', textOverflow: 'ellipsis',textAlign:'center'}}>{row.companyName}</div>)
-    },
-    // {
-    //   prop: 'approveName',
-    //   label: '审批人',
-    //   align: 'center'
-    // },
-    {
-      prop: 'deadline',
-      label: '截止时间',
-      align: 'center'
-    },
-    // {
-    //   prop: 'taskNode',
-    //   label: '当前节点',
-    //   align: 'center'
-    // },
-    {
-      prop: 'state',
-      label: '状态',
-      align: 'center',
-      width: 200,
-      showOverflowTooltip: false,
-      currentRender: ({row, index}) => (<Tag dictType={'demand_collection'} value={row.state}/>)
-    },
-    {
-      prop: 'oper',
-      label: '操作',
-      align: 'center',
-      fixed: 'right',
-      showOverflowTooltip: false,
-      currentRender: ({row, index}) => {
-        let btn = []
-        let buttons = new Set(Array.from(row.buttons))
-        if (buttons.has("details")) {
-          btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
-        }
-        if (buttons.has("report")) {
-          btn.push({label: '需求上报', prem: auths.report, func: () => handleReport(row), type: 'primary'})
-        }
-        return (
-            <div style={{width: '100%'}}>
-              {
-                btn.map(item => (
-                    <el-button
-                        type={item.type}
-                        v-perm={item.prem}
-                        onClick={() => item.func()}
-                        link
-                    >
-                      {item.label}
-                    </el-button>
-                ))
-              }
-            </div>
-        )
-      }
-    }
-  ],
-  api: '/workflow/mosr/requirement',
-  params: {
-    state: "4"
-  }
-})
 
 const data = reactive({
   fundPieCharts: null,
@@ -804,6 +636,12 @@ const moneyPieOption = ref({
     },
   ]
 })
+
+onMounted(() => {
+  // getTodoList()
+  // getResearchChart()
+  init()
+})
 const init = () => {
   data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value)
   data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value)
@@ -811,6 +649,7 @@ const init = () => {
 const getTodoList=()=>{
   getHomeInfo().then(res => {
     if (res.code === 1000) {
+
       // todoList.value=res.data.rows
       // todoNum.value=res.data.total
     }else{
@@ -822,11 +661,23 @@ const getTodoList=()=>{
     }
   })
 }
-onMounted(() => {
-  // getTodoList()
-  init()
-})
-
+const getResearchChart=()=>{
+  getResearchFundChart().then(res => {
+    if (res.code === 1000) {
+      console.info("🚀 ~method:res -----", res.data,res.data.rdCompanyList)
+      if(moneyPieOption.value.series&&moneyPieOption.value.series?.length>0){
+        moneyPieOption.value.series[0].data=res.data.rdCompanyList
+      }
+      init()
+    }else{
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type:  'error'
+      })
+    }
+  })
+}
 window.addEventListener('resize', () => {
   data.fundPieCharts = null
   data.moneyPieCharts = null