dvcp_v2_webapp/project/hlj/app/AppRatingTask/components/FormDetail.vue

<template>
  <ai-detail class="AppAnnounceDetail">
    <template slot="title">
      <ai-title title="表单详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="基础信息">
        <template #content>
          <ai-wrapper>
            <ai-info-item label="表单名称" :value="info.templateName"></ai-info-item>
            <ai-info-item label="参评人" :value="info.evaluatorsNames"></ai-info-item>
            <ai-info-item label="开始时间" :value="info.beginTime"></ai-info-item>
            <ai-info-item label="评分人" :value="info.scorerNames"></ai-info-item>
            <ai-info-item label="结束时间" :value="info.endTime"></ai-info-item>
            <ai-info-item label="填写情况">
              <span>已填写{{ info.overPhr }}份，还剩{{ info.totalPhr }}份</span>
            </ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card>
        <template #title>
          <div class="AppAnnounceDetail-title">
            <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">填写统计</span>
            <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">考核统计</span>
          </div>
        </template>
        <template #content>
          <div class="content-item" v-if="currIndex === 0">
            <div class="bottom">
              <ai-search-bar>
                <template #left>
                  <ai-download
                    :instance="instance"
                    :url="`/app/appassessmentscortask/export?id=${params.formId}&type=0&name=${search1.name}&status=${search1.status}`"
                    fileName="填写统计"
                    :disabled="tableData1.length == 0">
                    <el-button size="small" type="primary">导出明细</el-button>
                  </ai-download>
                  <ai-select
                    v-model="search1.status"
                    clearable
                    placeholder="请选择完成情况"
                    :selectList="dictList"
                    @change="getList1()">
                  </ai-select>
                </template>
                <template #right>
                  <el-input
                    v-model="search1.name"
                    size="small"
                    key="currindex1"
                    placeholder="请输入参评人、评分人姓名"
                    clearable
                    v-throttle="() => {search1.current = 1, getList1()}"
                    @clear="search1.current = 1, search1.name = '', getList1()"
                    suffix-icon="iconfont iconSearch">
                  </el-input>
                </template>
              </ai-search-bar>
              <ai-table
                :tableData="tableData1"
                :col-configs="colConfigs1"
                :total="total1"
                border
                tableSize="small"
                :current.sync="search1.current"
                :size.sync="search1.size"
                @getList="getList1">
                <el-table-column slot="evaluators" label="参评人" align="left">
                  <template slot-scope="{ row }">
                    <div class="userinfo">
                      <img :src="row.evaluatorsAvatar" />
                      <span>{{ row.evaluatorsName }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column slot="score" label="评分人" align="center">
                  <template slot-scope="{ row }">
                    <div class="userinfo" style="padding-left: 80px">
                      <img :src="row.scorerAvatar" />
                      <span>{{ row.scorerName }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
                  <template slot-scope="{ row }">
                    <div class="table-options">
                      <el-button type="text" :disabled="!row.totalScore" @click="showDetail(row.id)">查看内容</el-button>
                    </div>
                  </template>
                </el-table-column>
              </ai-table>
            </div>
          </div>
          <div class="content-item" v-if="currIndex === 1">
            <div class="bottom">
              <ai-search-bar>
                <template #left>
                  <ai-download
                    :instance="instance"
                    :url="`/app/appassessmentscortask/export?id=${params.formId}&type=1&name=${search2.name}`"
                    fileName="填写统计"
                    :disabled="tableData2.length == 0">
                    <el-button size="small" type="primary">导出列表</el-button>
                  </ai-download>
                </template>
                <template #right>
                  <el-input
                    v-model="search2.name"
                    size="small"
                    key="currindex2"
                    placeholder="请输入参评人姓名"
                    clearable
                    v-throttle="() => {search2.current = 1, getList2()}"
                    @clear="search2.current = 1, search2.name = '', getList2()"
                    suffix-icon="iconfont iconSearch">
                  </el-input>
                </template>
              </ai-search-bar>
              <ai-table
                :tableData="tableData2"
                :col-configs="colConfigs2"
                :total="total2"
                border
                tableSize="small"
                :current.sync="search2.current"
                :size.sync="search2.size"
                @getList="getList2">
              </ai-table>
            </div>
          </div>
        </template>
      </ai-card>
      <ai-dialog
        customFooter
        :visible.sync="isShow"
        @onConfirm="isShow = false"
        width="800px"
        title="表单">
          <div class="middle-content form">
            <div class="middle-content__wrapper">
              <div>
                <div class="left-item__item left-item__item--banner" key="banner" v-if="templateInfo.headPicture">
                  <img :src="templateInfo.headPicture">
                </div>
                <div class="left-item__item left-item__item--formname" key="title">
                  <h2>{{ templateInfo.title }}</h2>
                </div>
                <div class="left-item__item left-item__item--text" key="text">
                  <p>{{ templateInfo.tableExplain }}</p>
                </div>
              </div>
              <div
                class="left-item__item components-item"
                v-for="(item, i) in targetList"
                :key="i">
              <div class="left-item__item--title">
                <i :style="{opacity: item.required ? 1 : 0}">*</i>
                <span>{{ i + 1 }}.</span>
                <h2>{{ item.label }}</h2>
              </div>
              <div class="left-item__item--wrapper">
                <template v-if="(item.type === 'radio')">
                  <div class="radio-item" v-for="(field, index) in item.options" :key="index">
                    <input type="radio" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
                    <img :src="field.img[0].url" v-if="field.img.length">
                    <label>{{ field.label }}</label>
                  </div>
                </template>
                <template v-if="item.type === 'upload'">
                  <img style="width: 100%; height: 100%;" :src="formInfo[`field_${i}`]" v-if="formInfo[`field_${i}`]">
                  <div class="left-item__item--upload" v-else>
                    <span>图片</span>
                  </div>
                </template>
                <template v-if="item.type === 'select'">
                  <el-input resize="none" class="preview" style="color: #333" :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></el-input>
                </template>
                <template v-if="(item.type === 'checkbox')">
                  <div class="radio-item" v-for="(field, index) in item.options" :key="index">
                    <input type="checkbox" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
                    <img :src="field.img[0].url" v-if="field.img.length">
                    <label>{{ field.label }}</label>
                  </div>
                </template>
                <template v-if="(item.type === 'input')">
                  <div class="text-item">
                    <input :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled>
                  </div>
                </template>
                <template v-if="(item.type === 'textarea')">
                  <div class="textarea-item" resize="none">
                    <textarea :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></textarea>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <el-button @click="isShow = false">关闭</el-button>
        </template>
      </ai-dialog>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'Detail',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },

    data () {
      return {
        total1: 0,
        total2: 0,
        name1: '',
        name2: '',
        info: {},
        search1: {
          current: 1,
          size: 10,
          name: '',
          status: ''
        },
        search2: {
          current: 1,
          size: 10,
          name: ''
        },
        tableData1: [],
        tableData2: [],
        info: {},
        currIndex: 0,
        colConfigs1: [
          { slot: 'evaluators', label: '参评人', align: 'center' },
          { slot: 'score', label: '评分人', align: 'center' },
          { prop: 'commitTime', label: '提交时间', align: 'center' },
          { prop: 'totalScore', label: '总分', align: 'center' }
        ],
        colConfigs2: [
          { prop: 'evaluatorsName', label: '参评人', align: 'center' },
          { prop: 'scorerCount', label: '评分人数', align: 'center' },
          { prop: 'avgScore', label: '平均分', align: 'center' },
        ],
        dictList: [
          {
            dictName: '未填报',
            dictValue: '0'
          },
          {
            dictName: '已填报',
            dictValue: '1'
          }
        ],
        templateInfo: {},
        formInfo: {},
        isShow: false,
        targetList: []
      }
    },

    created () {
      this.getInfo(this.params.formId)
      this.getList1()
      this.getList2()
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/appassessmentscortask/taskTemplateDetail?id=${id}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
            this.instance.post(`/app/appassessmentscoretemplate/queryDetailById?id=${res.data.templateId}`).then(res => {
              if (res.code === 0) {
                this.templateInfo = res.data
                this.targetList = res.data.fields.map(item => {
                  return JSON.parse(item.fieldInfo)
                })
              }
            })
          }
        })
      },

      showDetail (id) {
        this.instance.post(`/app/appassessmentscortask/queryDataInfoById?taskDetailId=${id}&dataId=${id}`).then(res => {
          if (res.code == 0) {
            this.formInfo = res.data

            this.targetList.forEach((item, index) => {
              if (item.type === 'checkbox' && this.formInfo[`field_${index}`]) {
                this.formInfo[`field_${index}`] = this.formInfo[`field_${index}`].split(',')
              }
            })

            this.isShow = true
          }
        })
      },

      getList2 () {
        this.instance.post(`/app/appassessmentscortask/assessStatistics`, null, {
          params: {
            id: this.params.formId,
            ...this.search2
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData2 = res.data.records
            this.total2 = res.data.total
          }
        })
      },

      getList1 () {
        this.instance.post(`/app/appassessmentscortask/fillStatistics`, null, {
          params: {
            id: this.params.formId,
            ...this.search1
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData1 = res.data.records
            this.total1 = res.data.total
          }
        })
      },

      cancel () {
        this.$emit('change', {
          type: 'Detail',
          isRefresh: false,
          params: {
            id: this.params.id
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.AppAnnounceDetail {
  .userinfo {
    display: flex;
    align-items: center;
    line-height: 1;

    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    span {
      color: #333;
      font-size: 14px;
    }
  }

  ::v-deep .AppAnnounceDetail-title {
    display: flex;
    align-items: center;

    span {
      height: 100%;
      line-height: 56px;
      margin-right: 32px;
      color: #888888;
      font-size: 16px;
      font-weight: 600;
      transition: all ease 0.3s;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      user-select: none;

      &:hover {
        color: #222;
      }

      &:last-child {
        margin-right: 0;
      }

      &.active {
        color: #222222;
        border-bottom: 3px solid #2266FF;
      }
    }
  }
  .form {
    .left-item__item--banner {
      img {
        width: 100%;
        height: 235px;
      }

      .config-item__banner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 235px;
        line-height: 1;
        border: 1px dashed #bbb;

        span {
          margin-top: 4px;
          color: #555555;
          font-size: 14px;
        }

        i {
          font-size: 30px;
          color: #8899bb;
        }
      }
    }

    .left-item__item--formname {
      margin: 16px 0 32px;
      padding: 0 12px;
      color: #333333;
      font-size: 15px;
      font-weight: normal;
      text-align: center;
      word-break: break-all;
    }

    .left-item__item--text {
      line-height: 20px;
      // margin-bottom: 48px;
      padding: 0 12px 20px;
      text-align: justify;
      color: #666;
      font-size: 14px;
      word-break: break-all;
    }

    .components-item {
      position: relative;
      padding: 16px 16px;

      .left-item__item--wrapper {
        & > img {
          max-width: 300px;
        }
      }

      .left-item__item--upload {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 120px;
        height: 120px;
        border-radius: 6px;
        border: 1px dashed #bbb;

        i {
          font-size: 24px;
          color: #8899bb;
        }

        span {
          margin-top: 4px;
          font-size: 12px;
          color: #555;
        }
      }

      .text-item {
        input {
          display: block;
          width: 100%;
          height: 40px;
          border: none;
          border-bottom: 1px solid #ddd;

          &:focus {
            outline: none;
          }

          &:disabled {
            background: #fff;
          }
        }
      }

      .textarea-item {
        textarea {
          width: 100%;
          height: 120px;
          resize: none;
          border: 1px solid #ddd;
          padding: 10px;

          &:focus {
            outline: none;
          }

          &:disabled {
            background: #fff;
          }
        }
      }

      .radio-item {
        display: flex;
        margin-bottom: 10px;

        input {
          position: relative;
          top: 2px;
        }

        &:last-child {
          margin-bottom: 0;
        }

        label {
          margin-left: 10px;
        }

        img {
          width: 60px;
          margin-left: 10px;
        }
      }
    }

    .left-item__item--title {
      display: flex;
      margin-bottom: 10px;

      i {
        position: relative;
        top: 3px;
        margin-right: 5px;
        color: #E22120;
      }

      span {
        position: relative;
        top: 3px;
      }

      h2 {
        color: #333333;
        font-size: 15px;
      }
    }
  }
}
</style>