bdtp-digital-front/src/views/demandmanage/Detail.vue

<template>
  <Modal
    :show="value"
    :title="handle.type"
    mode="default"
    @close="cancel"
  >
    <template #content>
      <div style="max-height:700px;width:100%;padding:12px 32px 32px 32px;">
        <!-- 使用者 详情 状态回复信息行 -->
        <div class="stateCon" v-if="handle.type!='新增需求'&&detail.billState!=0&&handle.user">
          <div class="state-con-1" v-if="handle.user">
            <div><div class="title">状态：</div><Tag type="dot" :color="detail.dot">{{detail.text}}</Tag></div>
            <!-- 需求状态 - 0:待提交 1:待回复 2:已接受 3:已拒绝 4:待完善 5:论证中 -->
            <div v-if="detail.billState==2||detail.billState==3||detail.billState==4||detail.billState==5"><div>回复人：</div><div v-text="detail.respondent"></div></div>
            <div v-if="detail.billState==2||detail.billState==3||detail.billState==4"><div>回复时间：</div><div v-text="toTime(detail.answerTime)"></div></div>
            <div v-if="detail.billState==5"><div>预计回复时间：</div><div v-text="toTime(detail.estimateTime)"></div></div>
          </div>
          <div class="state-con-2" v-if="detail.billState==2||detail.billState==3||detail.billState==4">
            <div><div class="title">回复信息：</div><div class="state-con-reply" v-text="detail.reply||'--'"></div></div>
          </div>
        </div>
        <div class="gridCon" v-if="handle.type!='新增需求'&&detail.billState!=0&&(((detail.billState!=4||(detail.billState==4&&handle.type=='详情'))&&handle.user)||!handle.user)">
          <div class="gridRow">
            <div class="gridCell1">用户名</div><div v-text="detail.userName"></div>
          </div>
          <div class="gridRow">
            <div class="gridCell1">部门</div><div v-text="detail.deptName"></div>
          </div>
          <div class="gridRow">
            <div class="gridCell1">条线</div><div v-text="line[detail.productLine]"></div>
          </div>
          <div class="gridRow">
            <div class="gridCell1">提出时间</div><div v-text="toTime(detail.creationTime)"></div>
          </div>
          <div class="gridRow">
            <div class="gridCell1">编码</div><div v-text="detail.code"></div>
          </div>
            <div class="gridRow">
            <div class="gridCell1">主题</div><div v-text="detail.subject"></div>
          </div>
          <div class="gridRow">
            <div class="gridCell1">需求内容</div><div v-text="detail.content"></div>
          </div>
        </div>
        <!-- 使用者 新增修改 -->
        <div class="editCon" v-if="handle.type=='新增需求'||handle.type=='修改需求'">
          <div class="editCell">
            <div class="editCellTitle">用户名</div>
            <Input width="100%" placeholder="用户名" disabled v-model="detail.userName"/>
          </div>
          <div class="editCell">
            <div class="editCellTitle"><em>*</em> 部门</div>
            <Input width="100%" placeholder="请输入该用户在钉钉中的部门信息" v-model="detail.deptName"/>
          </div>
          <div class="editCell">
            <div class="editCellTitle"><em>*</em> 条线</div>
            <Select
              isReadOnly
              :selectdata="lineData"
              width="536"
              v-model="detail.productLine"
              :placeholder="'请选择内容'"
              hideClear
            />
          </div>
          <div class="editCell">
            <div class="editCellTitle"><em>*</em> 主题</div>
            <Input placeholder="示例：新增对象-策略" v-model="detail.subject" :maxLength="30"/>
          </div>
          <div class="editCell">
            <div class="editCellTitle"><em>*</em> 需求内容</div>
            <Input width="100%" placeholder="请输入内容" type="textarea" :maxLength="210" v-model="detail.content" @input="inputContent" :error-info="errorMsg"/>
          </div>
          <!-- <div class="editCell">
            <div class="editCellTitle"><em>*</em> 需求内容</div>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="detail.userName"
              maxlength="30"
              show-word-limit
            />
          </div> -->
        </div>
        <!-- 编辑者 回复 -->
        <div class="replyCon"  v-if="handle.type=='回复'||handle.type=='继续回复'">
          <div class="replyInfo"><b class="replyInfo1">需求回复</b> <b class="replyInfo2" v-if="handle.type=='继续回复'">上次回复时间：<b class="replyInfo3" v-text="toTime(detail.estimateTime,true)"></b></b></div>
          <div>
             <radio-group :group-data.sync="stateGroup" type="single" @change="stateChange"/>
          </div>
          <Input v-if="stateSel!=5" width="100%" placeholder="请输入回复的信息" type="textarea" :maxLength="210" v-model="reply" @input="inputContent" :error-info="errorMsg"/>
          <div v-if="stateSel==5" class="estimateTime"><div>预计回复时间</div><PickerDate @change="dateChange" :picker="['day']" placeholder="请选择日期"/></div>
          <div></div>
        </div>
        <!-- 编辑者 详情 状态回复信息行 -->
        <div class="stateCon" v-if="handle.type=='详情'&&!handle.user" style="padding-top:14px">
          <div class="state-con-1">
            <div><div class="title">状态：</div><Tag type="dot" :color="detail.dot">{{detail.text}}</Tag></div>
            <!-- 需求状态 - 0:待提交 1:待回复 2:已接受 3:已拒绝 4:待完善 5:论证中 -->
            <div v-if="detail.billState==2||detail.billState==3||detail.billState==4"><div>操作时间：</div><div v-text="toTime(detail.answerTime,true)"></div></div>
          </div>
          <div class="state-con-2" v-if="detail.billState==2||detail.billState==3||detail.billState==4">
            <div><div class="title">回复信息：</div><div class="state-con-reply" v-text="detail.reply||'--'"></div></div>
          </div>
        </div>
      </div>
    </template>
    <template #handle>
      <div v-if="handle.type=='新增需求'||handle.type=='修改需求'||handle.type=='回复'||handle.type=='继续回复'">
        <Button @click="cancel" :type="cancelButtonType">{{cancelButtonText}}</Button>
        <Button v-if="handle.user" @click="save" type="default">保存</Button>
        <Button @click="confirm" :type="confirmButtonType">{{confirmButtonText}}</Button>
      </div>
    </template>
  </Modal>
</template>

<script>
import { Modal, Input, Select, Tag, RadioGroup, PickerDate } from 'meri-design'

export default {
  components: {
    Modal,
    Input,
    Select,
    Tag,
    RadioGroup,
    PickerDate
  },
  props: {
    value: {}, // 显示隐藏
    handle: {
      default: {
        user: true,
        type: '新增需求', // 新增需求 详情 修改需求 回复 继续回复
        detail: {}
      }
    }, // 操作
    cancelButtonText: {
      default: '取消'
    },
    cancelButtonType: {
      default: 'text'
    },
    confirmButtonText: {
      default: '提交'
    },
    confirmButtonType: {
      default: 'primary'
    }
  },
  data () {
    return {
      respondent: '',
      reply: '',
      estimateTime: null,
      stateSel: 2,
      stateGroup: [
        {
          id: 2,
          name: '接受',
          checked: 'checked',
          disabled: false
        },
        {
          id: 3,
          name: '拒绝',
          checked: 'uncheck',
          disabled: false
        },
        {
          id: 4,
          name: '待完善',
          checked: 'uncheck',
          disabled: false
        },
        {
          id: 5,
          name: '待论证',
          checked: 'uncheck',
          disabled: false
        }
      ],
      line: { 1: '业务', 2: '研发', 3: '实施' },
      lineData: [{ id: 1, name: '业务' }, { id: 2, name: '研发' }, { id: 3, name: '实施' }],
      detail: {
        userName: '',
        deptName: '',
        productLine: null,
        subject: '',
        content: '',
        text: '',
        dot: '#f0f'
      },
      errorMsg: ''
    }
  },
  methods: {
    dateChange (date) {
      this.estimateTime = this.$moment(date, 'YYYY.MM.DD').valueOf()
    },
    stateChange (e) {
      this.stateSel = e[0]
      this.reply = ''
      this.estimateTime = null
    },
    toTime (time, format) {
      return time ? this.$moment(time).format(format ? 'YYYY.MM.DD' : 'YYYY-MM-DD HH:mm:ss') : '--'
    },
    //   取消
    cancel () {
      this.$emit('cancel')
    },
    confirm () {
      if (this.handle.type === '回复' || this.handle.type === '继续回复') {
        const temp = {
          ids: [this.handle.detail.id],
          billState: this.stateSel,
          respondent: this.respondent,
          reply: this.reply,
          estimateTime: this.estimateTime
        }
        // 校验
        let error = ''
        if (temp.billState === 5) {
          if (!temp.estimateTime)error = '请选择预计回复时间'
        } else {
          if (!temp.reply || temp.reply.length > 200)error = '填写内容有误，请查验！'
        }
        if (error) {
          this.$pmessage({ type: 'error', message: error })
        } else {
          this.$emit('confirm', temp)
        }
      } else {
        const check = this.check()
        if (check) this.$emit('confirm', check)
      }
    },
    save () {
      const check = this.check()
      if (check) this.$emit('save', check)
    },
    inputContent (val) {
      if (val.length > 200) {
        this.errorMsg = '限制200字符'
      } else {
        this.errorMsg = ''
      }
    },
    check () {
      // 校验
      const detail = this.detail
      if (!detail.userName || !detail.deptName || !detail.productLine || !detail.subject || !detail.content || detail.content.length > 200) {
        this.$pmessage({ type: 'error', message: '填写内容有误，请查验！' })
        return false
      }
      return detail
    }
  },
  mounted () {
    console.log(212)
    if (this.handle.userName && this.handle.user) { // 新建
      this.detail.userName = this.handle.userName
    } else if (this.handle.userName && !this.handle.user) { // 回复
      this.respondent = this.handle.userName
      this.detail = this.handle.detail
      if (this.handle.type === '继续回复') {
        this.stateGroup[3].disabled = true
      }
    } else {
      this.detail = this.handle.detail
    }
  }
}
</script>
<style lang="less" scoped>
.editCon{
  .editCell{
    .editCellTitle{
      padding: 8px 0;
      em{
        color:#F54E45;
      }
    }
    .p-input,.p-textarea{
      width: 100% !important;
    }
  }
}
.stateCon{
  color: #646C73;
  .title{
    color: #1F2429;
  }
  &>div{
    display: flex;
    padding: 8px 0;
  }
  .state-con-1{
    /deep/.p-tag-wrapper{
      height: 18px !important;
    }
    &>div {
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
    &>div:first-child{
      padding-left: 0px;
    }
  }
  .state-con-2{
    padding-bottom: 0;
  }
  .state-con-reply{
    padding-top: 6px;
    font-size: 16px;
    line-height: 28px;
  }
}
.gridCon {
  border: 1px solid #D8D8D8;
  margin-top: 12px;
  .gridRow {
    min-height: 50px;
    border-bottom: 1px solid #eff0f1;
    display: flex;
    .gridCell1 {
      width: 82px;
      text-align: right;
      padding: 0 14px 0 0;
      background: #F5F7FA;
      color: #646C73;
      font-weight: 500;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    &>div:nth-child(2) {
      width: calc(100% - 82px);
      padding: 12px;
      word-break: break-all;
      color: #1F2429;
      line-height: 22px;
    }
  }
  .gridRow:last-child{
    border-bottom: none;
  }
}
.replyCon{
  .replyInfo{
    padding-top: 20px;
    .replyInfo1{
      color: #1F2329;
      font-weight: 500;
    }
    .replyInfo2{
      color: #646C73;
    }
    .replyInfo3{
      color: #F54E45;;
    }
  }
  .p-input,.p-textarea{
    width: 100% !important;
  }
  .p-radio-group {
    padding-left: 0;
  }
  .estimateTime{
    display: flex;
    align-items: center;
    &>div:first-child{
      padding-right: 10px;
    }
  }
}
</style>