暂存

package-lock.json

@@ -23,6 +23,7 @@
         "dom-to-image": "^2.6.0",
         "element-ui": "^2.15.6",
         "file-saver": "^2.0.5",
+        "gantt-chart-vue": "^1.2.4",
         "howler.js": "^2.1.2",
         "increase-memory-limit": "^1.0.7",
         "js-md5": "^0.7.3",
@@ -7850,6 +7851,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz",
@@ -10467,6 +10473,19 @@
       "resolved": "https://registry.npmmirror.com/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
       "integrity": "sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg=="
     },
+    "node_modules/gantt-chart-vue": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/gantt-chart-vue/-/gantt-chart-vue-1.2.4.tgz",
+      "integrity": "sha512-g4OLxbP9RuUNzY7n1FuYfqUe46Fl/0AXTu5gehwS1pbh5iivTWn+QJK73VGw1//c1C0E2xqzEhoLH/G4TqdkUw==",
+      "dependencies": {
+        "dayjs": "^1.11.10",
+        "element-ui": "^2.15.14",
+        "vue": "^2.6.14"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
     "node_modules/gauge": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/gauge/-/gauge-3.0.2.tgz",

package.json

@@ -24,6 +24,7 @@
     "dom-to-image": "^2.6.0",
     "element-ui": "^2.15.6",
     "file-saver": "^2.0.5",
+    "gantt-chart-vue": "^1.2.4",
     "howler.js": "^2.1.2",
     "increase-memory-limit": "^1.0.7",
     "js-md5": "^0.7.3",

src/HDrpManagement/serviceImprovement/components/improvementPlan/edit.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <el-button type="primary" size="small" @click="editBtn">{{$t(`编辑改善方案`)}}</el-button>
+    <el-drawer
+        :title="$t('编辑方案')"
+        :visible.sync="drawerVisible"
+        size="75%"
+        direction="rtl"
+        append-to-body
+        :show-close="false"
+        @close="onClose"
+    >
+      <div class="drawer__panel" style="margin-bottom: 0">
+        <div style="display: flex;justify-content: space-between">
+          <div>{{$t(`方案编制`)}}</div>
+          <el-button type="primary" size="small" @click="addRow">{{$t(`添加行`)}}</el-button>
+        </div>
+        <table-detail :layout="tablecols" :data="list" :opwidth="200" :custom="true" style="margin-top: 10px">
+          <template v-slot:customcol="scope">
+            <div v-if="scope.column.columnname == 'title'">
+              <div v-if="nowRow == scope.column.data.rowindex">
+                <el-input size="small" v-model="scope.column.data[scope.column.columnname]" placeholder="请输入任务名称"></el-input>
+              </div>
+              <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
+            </div>
+            <div v-else-if="scope.column.columnname == 'begdate'">
+              <div v-if="nowRow == scope.column.data.rowindex">
+                <el-date-picker
+                    v-model="scope.column.data[scope.column.columnname]"
+                    value-format="yyyy-MM-dd"
+                    size="small"
+                    type="date"
+                    placeholder="选择日期">
+                </el-date-picker>
+              </div>
+              <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
+            </div>
+            <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
+          </template>
+        </table-detail>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "edit",
+  data(){
+    return {
+      drawerVisible:false,
+      param:{
+        "id": 2026020210235502,
+        "content": {
+          "sa_service_improvementid": this.$route.query.id,
+          "pageNumber": 1,
+          "pageSize": 99
+        },
+      },
+      tablecols:[],
+      list:[],
+      total:0,
+      currentPage:0,
+      nowRow:-1
+    }
+  },
+  methods:{
+    editBtn(){
+      this.drawerVisible = true
+      this.param.content.pageNumber = 1
+      this.listData()
+    },
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.list = res.data
+      console.log(res.data,'方案列表')
+    },
+    addRow(){
+      this.nowRow = this.list.length + 1
+      this.list.push({
+        rowindex:this.list.length + 1,
+        title:'',
+        begdate:'',
+        enddate:'',
+        measure:'',
+        name:''
+      })
+    },
+    onClose(){}
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).improvementPlanEditTable.tablecols
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/HDrpManagement/serviceImprovement/components/improvementPlan/ganttChart.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <gantt-chart-vue
+        :rows="ganttRows"
+        :legend="ganttLegend"
+        :readOnly="false"
+        @tagDragEnd="handleDragEnd"
+    />
+  </div>
+</template>
+
+<script>
+import ganttChartVue from 'gantt-chart-vue';
+export default {
+  name: "ganttChart",
+  components: { ganttChartVue },
+  data() {
+    return {
+      // 1. 定义图例 (tag的类型和颜色)
+      ganttLegend: [
+        { label: '设计', color: '#5470c6', type: 1, dragable: true },
+        { label: '开发', color: '#91cc75', type: 2, dragable: true },
+        { label: '测试', color: '#fac858', type: 3, dragable: false },
+      ],
+      // 2. 定义行数据
+      ganttRows: [
+        {
+          label: '项目A',
+          tags: [
+            { startTime: '2024-03-01 09:00', endTime: '2024-03-05 18:00', label: '原型设计', type: 1 },
+            { startTime: '2024-03-06 09:00', endTime: '2024-03-20 18:00', label: '前端开发', type: 2 },
+          ]
+        },
+        {
+          label: '项目B',
+          tags: [
+            { startTime: '2024-03-10 09:00', endTime: '2024-03-25 18:00', label: '功能测试', type: 3 },
+          ]
+        }
+      ]
+    };
+  },
+  methods: {
+    handleDragEnd(data) {
+      console.log('任务拖拽结束，新数据：', data);
+      // 在这里更新后端数据
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

src/HDrpManagement/serviceImprovement/components/improvementPlan/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <edit></edit>
+    <table-detail :layout="tablecols" :data="list" :opwidth="200" :custom="true" style="margin-top: 10px">
+      <template v-slot:customcol="scope">
+        <div>{{scope.column.data[scope.column.columnname]}}</div>
+      </template>
+    </table-detail>
+<!--    <ganttChart></ganttChart>-->
+  </div>
+</template>
+
+<script>
+import edit from './edit'
+import ganttChart from './ganttChart'
+export default {
+  name: "index",
+  components:{edit,ganttChart},
+  data(){
+    return {
+      param:{
+        "id": 2026020210235502,
+        "content": {
+          "sa_service_improvementid": this.$route.query.id,
+          "pageNumber": 1,
+          "pageSize": 99
+        },
+      },
+      tablecols:[],
+      list:[],
+      total:0,
+      currentPage:0,
+    }
+  },
+  computed: {
+    formattedDate() {
+      return this.originalDateTime.split(' ')[0];
+    }
+  },
+  methods:{
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.list = res.data
+      console.log(res.data,'方案列表')
+    }
+  },
+  mounted() {
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).improvementPlanTable.tablecols
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/HDrpManagement/serviceImprovement/components/serviceImprovement/index.vue

@@ -4,7 +4,9 @@
       <el-tab-pane label="真因分析" name="真因分析">
         <causeAnalysis :mainData="mainData" @editSuccess="editSuccess"></causeAnalysis>
       </el-tab-pane>
-      <el-tab-pane label="改善方案" name="改善方案">{{$t(`改善方案`)}}</el-tab-pane>
+      <el-tab-pane label="改善方案" name="改善方案">
+        <improvementPlan ref="planRef"></improvementPlan>
+      </el-tab-pane>
       <el-tab-pane label="方案执行" name="方案执行">{{$t(`方案执行`)}}</el-tab-pane>
       <el-tab-pane label="影响产品范围" name="影响产品范围">
         <affectedProductScope :data="mainData" :someUserid="someUserid"></affectedProductScope>
@@ -24,10 +26,11 @@ import detailInfo from '@/components/detailInfo/index'
 import associatedImprovementOrder from '../associatedImprovementOrder/index'
 import affectedProductScope from '../affectedProductScope/index'
 import causeAnalysis from '../causeAnalysis/index'
+import improvementPlan from '../improvementPlan/index'
 export default {
   name: "index",
   props:['mainData','someUserid'],
-  components:{detailInfo,associatedImprovementOrder,affectedProductScope,causeAnalysis},
+  components:{detailInfo,associatedImprovementOrder,affectedProductScope,causeAnalysis,improvementPlan},
   data(){
     return {
       activeName:'真因分析',
@@ -41,6 +44,9 @@ export default {
     handleClick(){
       if (this.activeName == '改善单信息'){
         this.changeDataStructure()
+      }else if (this.activeName == '改善方案'){
+        this.$refs.planRef.param.content.pageNumber = 1
+        this.$refs.planRef.listData()
       }
     },
     changeDataStructure(){

src/utils/tool.js

@@ -259,6 +259,7 @@ export default {
   },
   /*日期转化*/
   getDataChange(data){
+    console.log(data,'333')
     const newData = new Date(data)
     const year = newData.getFullYear()
     const month = String(newData.getMonth() + 1).padStart(2,'0')