新计划排期

itdmWeb/src/views/module-iTDM/itdmGongdanMaster/uGantt2.vue

@@ -0,0 +1,479 @@
+<template>
+  <div class="container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
+        <el-form-item label="委托单位" prop="weituoClient">
+          <el-select v-model="queryParams.weituoClient" clearable placeholder="请选择委托单位" @change="getWeituoClientOptions">
+            <el-option
+              v-for="item in weituoClientOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="委托编号" prop="weituoNo">
+          <el-select v-model="queryParams.weituoNo" clearable placeholder="请选择委托编号" @change="getWeituoNoOptions">
+            <el-option
+              v-for="item in weituoNoOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="getHjlist">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    <uGantt :configColumns="configColumns" :taskLists="taskLists" ref="uGantt" @dbclick="rowDblclick">
+      <!-- 其他需要自定义的弹窗数据 -->
+      <!-- 双击事件弹窗 -->
+      <el-dialog :title="title" :visible.sync="dialogVisible" width="35%">
+        <el-form ref="currentDbEdit" :model="currentDbEdit" :rules="rules" label-width="80px">
+          <el-form-item label="开始时间" prop="start_date">
+            <el-date-picker v-model="currentDbEdit.start_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" @change="dataChange"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="持续时间" prop="lastTime">
+            <el-input-number v-model="currentDbEdit.lastTime" @change="handleChange" :min="1"></el-input-number>
+            <span style="padding-left: 10px;">{{currentDbEdit.end_date}}</span>
+          </el-form-item>
+          <el-form-item label="报告编号" prop="reportNo">
+            <el-input v-model="currentDbEdit.reportNo" placeholder="请输入报告编号"></el-input>
+          </el-form-item>
+          <el-form-item label="项目经理" prop="pm">
+            <el-select v-model="currentDbEdit.pm" placeholder="请选择项目经理" style="width: 100%;">
+              <el-option
+                v-for="item in manager"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="试验设备" prop="shebeiId">
+            <el-select v-model="currentDbEdit.shebeiId" placeholder="请选择试验设备" style="width: 100%;">
+              <el-option
+                v-for="item in deviceOption"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="传感器" prop="chuanganqiArray">
+            <el-select v-model="currentDbEdit.chuanganqiArray" multiple placeholder="请选择传感器" style="width: 100%;">
+              <el-option
+                v-for="item in chuanganqi"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item label="结束" prop="end_date">
+            <el-date-picker v-model="currentDbEdit.end_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
+          </el-form-item> -->
+        </el-form>
+        <!-- <div> -->
+          <!-- 参数设定是固定格式，千万别改 -->
+          <!-- 开始：<el-date-picker v-model="currentDbEdit.start_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
+        </div>
+        <div>
+          结束：<el-date-picker v-model="currentDbEdit.end_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
+        </div> -->
+        <!-- 其他需要自定义的弹窗数据 -->
+        <!-- <slot/> -->
+        <span slot="footer" class="dialog-footer">
+          <!-- <el-button @click="remove">删 除</el-button> -->
+          <el-button @click="cancel">关 闭</el-button>
+          <el-button type="primary" @click="submit">确 定</el-button>
+        </span>
+      </el-dialog>
+    </uGantt>
+  </div>
+</template>
+
+<script>
+import uGantt from '@/components/module-iTDM/uGantt/index.vue'
+import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getJhList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl} from '@/api/api'
+export default {
+  name: '',
+  components: { uGantt },
+  data () {
+    return {
+      // width：每列宽度--现在逻辑全部默认显示左边table，右边滚动
+      // fixed：现在没有，如果需要一部分固定，一部分滚动，则需要重新设置一下组件
+      // resize：暂时没用
+      // align：每列文字显示
+      // tree：暂时没用
+      // 注意：start_date（开始日期）和end_date（结束日期）和add（添加按钮）是固定死的参数名，不能更改
+      configColumns: [
+        { name: "weituoNo", label: "委托编号", width: 140, fixed: true, resize: true, align: "center", tree: true },
+        { name: "testItems", label: "检测项目", width: 80, fixed: true, resize: true, align: "center"},
+        { name: "sampleName", label: "样品名称", width: 80, fixed: true, resize: true, align: "center" },
+        { name: "start_date", label: "开始时间", width: 80, fixed: true, resize: true, align: "center" },
+        { name: "end_date", label: "结束时间", width: 80, fixed: true, resize: true, align: "center" },
+        { name: "statusC", label: "状态", width: 60, fixed: true, resize: true, align: "center" },
+        // { name: "add", label:"", width: 30 }
+      ],
+      // 注意：start_date（开始日期）和end_date（结束日期）和add（添加按钮）是固定死的参数名，不能更改
+      // 注意：id和pid也是固定死的参数名，如果需要可以改组件
+      // id、content: 也是固定死的，如果需要可以改组件
+      taskLists: [],
+      // taskLists: [{
+      //     id: 0,
+      //     testItems: 'ceshi',
+      //     sampleName: 'ceshi',
+      //     start_date: '2023-07-03',
+      //     end_date: '2023-07-04',
+      //     statusC: '0',
+      //     content: '111'
+      //   }, {
+      //     id: 1,
+      //     testItems: '测试',
+      //     sampleName: '测试',
+      //     start_date: '',
+      //     end_date: '',
+      //     statusC: '0',
+      //   }, {
+      //     id: 2,
+      //     testItems: 'ceshi',
+      //     sampleName: 'ceshi',
+      //     start_date: '2023-07-06',
+      //     end_date: '2023-07-10',
+      //     statusC: '1',
+      //   }, {
+      //     id: 3,
+      //     testItems: '测试',
+      //     sampleName: '测试',
+      //     start_date: '',
+      //     end_date: '',
+      //     statusC: '1',
+      //   },{
+      //     id: 4,
+      //     testItems: '测试',
+      //     sampleName: '测试',
+      //     start_date: '',
+      //     end_date: '',
+      //     statusC: '1',
+      //   },
+      //   {
+      //     id: 5,
+      //     testItems: '测试',
+      //     sampleName: '测试',
+      //     start_date: '',
+      //     end_date: '',
+      //     statusC: '1',
+      //   },
+      //   {
+      //     id: 6,
+      //     testItems: '测试',
+      //     sampleName: '测试',
+      //     start_date: '',
+      //     end_date: '',
+      //     statusC: '1',
+      //   },
+      //   {
+      //     id: 7,
+      //     testItems: '测试',
+      //     sampleName: '测试',
+      //     start_date: '',
+      //     end_date: '',
+      //     statusC: '1',
+      //   },
+      //   {
+      //     id: 8,
+      //     testItems: '测试',
+      //     sampleName: '测试',
+      //     start_date: '',
+      //     end_date: '',
+      //     statusC: '1',
+      //   },
+      //   {
+      //     id: 21,
+      //     testItems: 'ceshi1',
+      //     sampleName: 'ceshi',
+      //     start_date: '2023-07-05',
+      //     end_date: '2023-07-08',
+      //     statusC: '1',
+      //     pid: 2
+      //   }, {
+      //     id: 23,
+      //     testItems: 'ceshi3',
+      //     sampleName: 'ceshi',
+      //     start_date: '2023-07-02',
+      //     end_date: '2023-07-04',
+      //     statusC: '1',
+      //     pid: 2
+      //   },
+      //   {
+      //     id: 22,
+      //     testItems: 'ceshi2',
+      //     sampleName: 'ceshi',
+      //     start_date: '2023-07-06',
+      //     end_date: '2023-07-10',
+      //     statusC: '1',
+      //     pid: 2
+      //   }
+      // ],
+      // 查询条件
+      queryParams: {
+        weituoClient: undefined,
+        weituoNo: undefined
+      },
+      // 委托单位下拉列表
+      weituoClientOptions: [],
+      // 委托编号下拉列表
+      weituoNoOptions: [],
+      // 试验设备下拉列表
+      deviceOption: [],
+      // 传感器下拉列表
+      chuanganqi: [],
+      // 试验类型下拉列表
+      testTypeOptions: [],
+      // 项目经理下拉列表
+      manager: [],
+      // 弹窗
+      dialogVisible: false,
+      title: '',
+      // 弹窗内容
+      currentDbEdit: {},
+      // 数组中的第几个
+      currentIndex: null,
+      // 删除判断
+      visible: false,
+      // 表单校验
+      rules: {
+      },
+    }
+  },
+  created () {
+    this.getHjlist()
+    this.getClientList()
+    this.getDevicelist()
+    this.getCgqlist()
+    this.initDictConfig()
+    this.getManagerList()
+  },
+  mounted () {
+  },
+  methods: {
+    // 获取委托单位下拉列表
+    getClientList(){
+      getWeituoClientList().then((res) =>{
+        console.log(res)
+        this.weituoClientOptions = res.result.map( res => {
+          return{
+            value: res,
+            label: res
+          }
+        })
+      })
+    },
+    // 监听委托单位，获取对应委托编号列表
+    getWeituoClientOptions(value){
+      console.log(value)
+      this.weituoNoOptions = []
+      this.queryParams.weituoNo = ''
+      getWeituoInfoListByClient(this.queryParams).then((res) =>{
+        this.weituoNoOptions = res.result.map( res => {
+          return{
+            value: res.weituoNo,  //传的值
+            label: res.weituoNo,  //展示
+          }
+        })
+      })
+    },
+    // 监听委托编号赋值
+    getWeituoNoOptions(value){
+      // 方法1：this.$forceUpdate() 强制刷新
+      // this.$forceUpdate()
+      // 方法2：
+      this.queryParams = {...this.queryParams}
+    },
+    // 通过委托编号查询检测项目
+    getHjlist(){
+      let that = this
+      console.log(that.queryParams)
+      var queryParam = that.queryParams
+      console.log(22,queryParam)
+      getJhList(queryParam).then((res) => {
+        console.log(17,res)
+        that.taskLists = []
+        if (res.result.length > 0 ) {
+          that.taskLists = res.result.map(res => {
+            return {
+              id: res.id,
+
+              weituoId: res.weituoId,
+              testItemsId: res.testItemsId,
+              yangpinId:res.yangpinId,
+              shebeiId:res.shebeiId,
+              pm: res.pm,
+              reportNo: res.reportNo,
+              chuanganqiArray:res.chuanganqiArray,
+              testPlanId:res.testPlanId,
+              status:res.status,
+
+              // text:res.reportNo,
+              start_date: res.jihuaStartDate,
+              end_date: res.jihuaEndDate,
+              weituoNo: res.weituoNo,
+              lastTime: res.lastTime,
+              sampleName: res.sampleName,
+              testItems: res.testItems,
+              deviceName: res.deviceName,
+              statusC: res.statusC,
+              izShiji: res.izShiji
+            }
+          })
+        }
+      })
+    },
+    // 获取设备下拉列表
+    getDevicelist(){
+      getDeviceList().then((res) => {
+        console.log(res)
+        this.deviceOption = res.map(response =>{
+          return {
+            value: response.id,
+            label: response.deviceName
+          }
+        })
+      })
+    },
+    // 获取传感器下拉列表
+    getCgqlist(){
+      getCgqList().then((res) => {
+        this.chuanganqi = res.map(response =>{
+          return {
+            key: response.id,
+            value: response.id,
+            label: response.xuliehao
+          }
+        })
+      })
+    },
+    // 字典获取试验类型下拉列表
+    initDictConfig() {
+      //获取字典       你的字典名称 ⬇⬇⬇⬇
+      ajaxGetDictItems('shiiyan_type').then((res) => {
+        console.log('字典',res)
+          this.testTypeOptions = res.result.map(response =>{
+          return {
+            key: response.value,
+            value: response.value,
+            label: response.label
+          }
+        })
+      })
+    },
+    // 获取项目经理下拉列表
+    getManagerList(){
+      var query ={
+        position: "项目经理"
+      }
+      getManagerList(query).then((res) => {
+        this.manager = res.map(response =>{
+          return {
+            key: response.name,
+            value: response.id,
+            label: response.name
+          }
+        })
+      })
+    },
+    // 双击事件
+    rowDblclick(current){
+      console.log(current)
+      this.currentDbEdit = current
+      this.title = this.currentDbEdit.sampleName + '-' + this.currentDbEdit.testItems + '-' + this.currentDbEdit.pm
+      // this.currentIndex = this.taskLists.findIndex(res=>res.id === current.id)
+      // this.currentDbEdit = this.taskLists[this.currentIndex]
+      this.dialogVisible = true
+    },
+    // 监听开始时间得到结束时间
+    dataChange(value){
+      console.log(value)
+      let nowDate = new Date(value)
+        nowDate.setDate(nowDate.getDate() + this.currentDbEdit.lastTime -1)
+        console.log(nowDate)
+        let y = nowDate.getFullYear()
+        let m = nowDate.getMonth() + 1
+        m = m < 10 ? ('0' + m) : m
+        let d = nowDate.getDate()
+        d = d < 10 ? ('0' + d) : d
+        this.currentDbEdit.end_date = y + '-' + m + '-' + d;
+        return this.currentDbEdit.end_date
+    },
+    // 监听持续时间得到结束时间
+    handleChange(value) {
+      console.log(value,this.currentDbEdit.start_date);
+      let nowDate = new Date(this.currentDbEdit.start_date)
+          nowDate.setDate(nowDate.getDate() + value -1)
+          console.log(nowDate)
+          let y = nowDate.getFullYear()
+          let m = nowDate.getMonth() + 1
+          m = m < 10 ? ('0' + m) : m
+          let d = nowDate.getDate()
+          d = d < 10 ? ('0' + d) : d
+          this.currentDbEdit.end_date = y + '-' + m + '-' + d;
+          return this.currentDbEdit.end_date
+    },
+    // 删除
+    remove(){
+      console.log(this.currentDbEdit.id)
+      if (this.currentDbEdit.statusC == "不可修改"){
+          this.$message.error('该项已进行，不可修改');
+          this.visible = false
+      }else{
+        var select={id: this.currentDbEdit.id}
+          delProjectJl(select).then((res) => {
+            console.log("删除",res)
+            if (res.success) {
+              this.$message.success('删除成功');
+              this.dialogVisible = false
+              this.currentDbEdit = {}
+              this.getHjlist()
+            }
+          })
+      }
+    },
+    cancel(){
+      this.currentDbEdit = {}
+      this.dialogVisible = false
+    },
+    submit(){
+      // this.taskLists[this.currentIndex].start_date = this.currentDbEdit.start_date
+      // this.taskLists[this.currentIndex].end_date = this.currentDbEdit.end_date
+      // this.dialogVisible = false
+      // this.currentDbEdit = {}
+      console.log(this.currentDbEdit)
+      this.currentDbEdit.jihuaStartDate = this.currentDbEdit.start_date ;
+      this.currentDbEdit.jihuaEndDate = this.currentDbEdit.end_date ;
+      this.currentDbEdit.parent = this.currentDbEdit.pid ;
+      saveProject(this.currentDbEdit).then((res) => {
+        console.log("提交返回",res)
+        if (res.success) {
+          this.$message.success('提交成功');
+          this.dialogVisible = false
+          this.currentDbEdit = {}
+          this.getHjlist()
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-table th.el-table__cell>.cell{
+  padding-left: 0;
+  padding-right: 0;
+}
+::v-deep .el-table .cell{
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>