programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/comps/overallPlan.vue

<template>
  <div v-loading="loading" class="overallPlan">
    <el-form>
      <el-row>
        <el-col :span="10" class="col-txt"><span>客户名称：</span><span>{{ custName }}</span></el-col>
        <el-col :span="14" class="col-txt"><span>项目名称：</span><span>{{ proName }}</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="10" class="col-txt">
          <span style="color: red">*</span>
          <span>整体计划启动日期：</span>
          <el-date-picker
            v-model="formData.startDate"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择"
          />
        </el-col>
        <el-col :span="14" class="col-txt">
          <span style="color: red">*</span>
          <span>整体计划完工日期：</span>
          <el-date-picker
            v-model="formData.endDate"
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" class="col-txt"><span style="color: red">*</span>
          <span>计划内容：</span>
        </el-col>
      </el-row>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="550"
      >
        <el-table-column
          prop="detailNo"
          label="序号"
          width="50"
          align="center"
        />
        <el-table-column
          prop="detailStage"
          label="阶段"
          align="center"
          width="130"
        >
          <template v-slot="scope">
            <input v-model="scope.row.detailStage" class="tableInput">
          </template>
        </el-table-column>
        <el-table-column
          prop="detailContent"
          label="工作内容"
          align="center"
          width="180"
        >
          <template v-slot="scope">
            <el-input
              v-model="scope.row.detailContent"
              type="textarea"
              maxlength="500"
              :autosize="{ minRows: 1, maxRows: 2}"
              placeholder="请输入内容"
              resize="none"
            />
          </template>
        </el-table-column>
        <el-table-column label="时间安排" align="center">
          <el-table-column label="启动日期" align="center">
            <template v-slot="scope">
              <div style="" class="tableDataPickBox">
                <el-date-picker
                  v-model="scope.row.detailStartDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="启动日期"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="结束日期" align="center">
            <template v-slot="scope">
              <div style="" class="tableDataPickBox">
                <el-date-picker
                  v-model="scope.row.detailEndDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                />
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="detailDeliverable"
          label="交付物"
          align="center"
          width="220"
        >
          <template v-slot="scope">
            <input v-model="scope.row.detailDeliverable" class="tableInput">
          </template>
        </el-table-column>
        <el-table-column
          prop="detailPreNo"
          label="前置任务序号"
          align="center"
          width="60"
        >
          <template v-slot="scope">
            <input v-model="scope.row.detailPreNo" class="tableInput">
          </template>
        </el-table-column>
        <el-table-column
          prop="detailResponsible"
          label="负责方"
          align="center"
          width="90"
        >
          <template v-slot="scope">
            <input v-model="scope.row.detailResponsible" class="tableInput">
          </template>
        </el-table-column>
        <el-table-column
          prop="detailMemo"
          label="备注"
          align="center"
          width="180"
        >
          <template v-slot="scope">
            <el-input
              v-model="scope.row.detailMemo"
              type="textarea"
              maxlength="500"
              :autosize="{ minRows: 1, maxRows: 2}"
              placeholder="请输入内容"
              resize="none"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
          align="center"
        >
          <template v-slot="scope">
            <div style="display: flex">
              <el-button type="primary" icon="el-icon-plus" circle @click.native.prevent="addRow(scope.$index, tableData)" />
              <el-button type="danger" icon="el-icon-delete" circle @click.native.prevent="deleteRow(scope.$index, tableData)" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="btnBox_xuan">
      <el-button type="info" @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </div>
</template>

<script>
export default {
    name: 'OverallPlan',
    data() {
        return {
            tableData: [],
            proId: '',
            proName: '',
            custId: '',
            custName: '',
            loading: false,
            masterPlanCheck: false,
            formData: {
                proId: '',
                customerId: '',
                startDate: '',
                endDate: '',
                detailJsonStr: ''
            }
        }
    },
    methods: {
        initData(obj, masterPlanCheck) {
            this.proId = obj.proId
            this.proName = obj.proName
            this.custId = obj.custId
            this.custName = obj.custName
            this.masterPlanCheck = masterPlanCheck
            if (this.masterPlanCheck) {
                this.getData()
            } else {
                this.formData.proId = obj.proId
                this.formData.customerId = obj.custId
                this.initTableData()
            }
        },
        getData() {
            this.loading = true
            this.baseRequest('getByProId', { proId: this.proId }).then(res => {
                if (res.data.data) {
                    this.formData = res.data.data.formData
                    this.tableData = res.data.data.detail || []
                }
                this.loading = false
            })
        },
        deleteRow(index, rows) {
            rows.splice(index, 1)
            this.handleNo()
        },
        addRow(index, rows) {
            this.tableData.push({
                detailNo: this.tableData.length + 1,
                detailStage: '',
                detailContent: '',
                detailStartDate: '',
                detailEndDate: '',
                detailDeliverable: '',
                detailPreNo: '',
                detailResponsible: '',
                detailMemo: ''
            })
        },
        handleNo() {
            for (let i = 0; i < this.tableData.length; i++) {
                this.tableData[i].detailNo = i + 1
            }
        },
        cancel() {
            this.$emit('sonMsg', false)
        },
        submit() {
            if (!this.formData.startDate) {
                this.$message.warning('请选择整体计划启动日期')
                return
            }
            if (!this.formData.startDate) {
                this.$message.warning('请选择整体计划完工日期')
                return
            }
            if (this.tableData.length < 3) {
                this.$message.warning('计划内容至少不少于三条')
                return
            }
            this.loading = true
            const api = this.masterPlanCheck ? 'edit' : 'add'
            this.formData.detailJsonStr = JSON.stringify(this.tableData)
            this.baseRequest(api, this.formData).then(res => {
                this.loading = false
                if (res.data.key === 200) {
                    this.$message.success('保存成功')
                    this.$emit('sonMsg', false)
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        initTableData() {
            this.tableData = [
                {
                    detailNo: 1,
                    detailStage: '需求调研',
                    detailContent: '依据初设边界，进一步调研需求部门工作人员、部门领导、分管领导、主要领导详细需求。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '《需求调研报告》、会议记录',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 2,
                    detailStage: '需求分析与确认',
                    detailContent: '针对需求调研内容进行整理、分析，形成需求文档，与业主方逐一确认。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '《需求确认书》、会议记录',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 3,
                    detailStage: '详细设计',
                    detailContent: '结合需求确认书，开展系统的细节设计及技术调研。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '原型设计稿、UI设计稿',
                    detailPreNo: 2,
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 4,
                    detailStage: '详细设计确认',
                    detailContent: '原型设计稿及UI设计稿经业主相关方确认并修改。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '《需求规格书》、会议记录',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 5,
                    detailStage: '系统开发',
                    detailContent: '工作管理系统、公共服务系统、数据采集系统功能开发。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '系统工程、数据库设计',
                    detailPreNo: 4,
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 6,
                    detailStage: '系统开发',
                    detailContent: '第三方资源购买开通。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '第三方资源清单及管理账号',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 7,
                    detailStage: '系统测试',
                    detailContent: '系统测试用例编写。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '测试方案',
                    detailPreNo: 4,
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 8,
                    detailStage: '系统测试',
                    detailContent: '系统功能测试、性能测试、兼容性测试。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '测试报告',
                    detailPreNo: 5,
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 9,
                    detailStage: '系统初始化',
                    detailContent: '系统初始化数据收集。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '系统初始化表格',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 10,
                    detailStage: '系统初始化',
                    detailContent: '数据初始化。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '系统工程',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 11,
                    detailStage: '系统部署',
                    detailContent: '云资源申请。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 12,
                    detailStage: '系统部署',
                    detailContent: '小程序服务器IP备案。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 13,
                    detailStage: '系统部署',
                    detailContent: '系统部署。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '',
                    detailPreNo: 10,
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 14,
                    detailStage: '系统部署',
                    detailContent: '小程序、APP发布。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 15,
                    detailStage: '系统培训',
                    detailContent: '培训物料编写、推广素材制作、用户手册制作。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 16,
                    detailStage: '系统培训',
                    detailContent: '针对制定培训方案与业主达成一致。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 17,
                    detailStage: '系统培训',
                    detailContent: '实施现场培训、线上培训。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '培训签到',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 18,
                    detailStage: '系统试运行',
                    detailContent: '试运行通知编写并协助业主方发布。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '试运行通知',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                },
                {
                    detailNo: 19,
                    detailStage: '系统试运行',
                    detailContent: '平台试运行：协助残联内部推广、试用问题解答、问题处理及需求优化。',
                    detailStartDate: '',
                    detailEndDate: '',
                    detailDeliverable: '试运行问题清单',
                    detailPreNo: '',
                    detailResponsible: '',
                    detailMemo: ''
                }
            ]
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globleRequest('ProMasterPlanController', opUrl, postData, 'team')
        }
    }
}
</script>

<style lang="scss">
    .overallPlan{
        .col-txt{
            text-align: left;
        }
        .el-table tr th {
            background:#2F82FF;
            color: white;
            font-size: 13px;
        }
        .tableInput{
            width: 95%;
            padding: 0 10px;
            height: 42px;
            display: flex;
            align-items: center;
            border: 1px solid #CCCCCC;
            border-radius: 4px;
            font-size: 12px;
            color: #666666;
        }
        .el-textarea{
            font-size: 12px !important;
        }
        .el-textarea__inner{
            padding: 0 10px !important;
            height: 42px !important;
            overflow-y: hidden;
        }
        .tableDataPickBox{
            display: flex;
            align-items: center;
            .el-input__inner {
                padding-right: 10px !important;
                height: 42px !important;
                line-height: 42px !important;
                font-size: 12px;
            }
        }
        .btnBox_xuan{
            margin-top: 20px;
            display: flex;
            justify-content: end;
        }
    }
</style>