server-group / juveniles-report

<template>
  <j-modal
    :maskClosable='false'
    :okButtonProps="{ class:{'jee-hidden': true} }"
    :title='title'
    :visible='visible'
    :width='width'
    cancelText='关闭'
    @cancel='handleCancel'
    switchFullscreen
    @ok='handleOk'>

    <a-spin :spinning='confirmLoading'>
      <p class='model_title'>{{ model.name }}</p>
      <a-row>
        <a-col :span='24'>
          <p class='description'>{{ model.questionnaire_dictText }}</p>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='12'><p>考察人员：{{ model.incarceratedUser_dictText }}</p></a-col>
        <a-col :span='12'><p>测评日期：{{ model.createTime }}</p></a-col>
      </a-row>
      <a-row v-if='model.resultPath!=null && model.resultPath!="" ' :span='24'>
        <j-upload v-model='model.resultPath' :multiple='false' :number='1' text='上传'></j-upload>
      </a-row>
      <!--      <a-row v-else :span='24'>-->
      <!--        <j-upload v-model='model.resultPath' :multiple='false' :number='1' text='上传结果'></j-upload>-->
      <!--      </a-row>-->
      <!--      <div v-if='showTips' class='ant-form-explain' style='color: #f5222d'>请上传测评结果</div>-->
      <!-- 子表单区域 -->
      <a-tabs>
        <a-tab-pane key='1' :forceRender='true' tab='答题列表'>
          <a-card :bordered='false' class='ques_list'>
            <!-- table区域-begin -->
            <div>
              <a-table
                ref='table'
                :columns='columns'
                :dataSource='dataSource'
                :loading='loading'
                :pagination='ipagination'
                bordered
                rowKey='id'
                size='middle'
                @change='handleTableChange'>
                <!-- 字符串超长截取省略号显示 -->
                <span slot='question' slot-scope='text'>
                    <j-ellipsis :length='25' :value='text' />
                  </span>
              </a-table>
            </div>
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
import { getArrayElement } from '@/utils/util'

export default {
  name: 'MrQuestionnaireSurveyResultsModal',
  components: {},
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: true,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/inspect/questionnaireSurveyResults/add',
        edit: '/inspect/questionnaireSurveyResults/edit',
        queryById: '/inspect/questionnaireSurveyResults/queryById',
        getInfoByQuestIdAndUserId: '/inspect/questionnaireSurveyResults/getInfoByQuestIdAndUserId'
      },
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      selectedQuestionKeys: [],
      selectionQuestions: [],
      description: '答题列表',
      // 表头
      columns: [
        {
          title: '题目',
          align: 'left',
          dataIndex: 'question',
          key: 'question',
          scopedSlots: { customRender: 'question' }
        },
        {
          title: '答案',
          align: 'center',
          dataIndex: 'answer',
          key: 'answer',
          scopedSlots: { customRender: 'question' }
        }
      ],
      questionQueryParam: {},
      showTips: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      console.log(pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    onSelectQuestionChange(selectedQuestionKeys, selectionQuestions) {
      this.selectedQuestionKeys = selectedQuestionKeys
      this.selectionQuestions = selectionQuestions
      console.log(selectedQuestionKeys)
      console.log(selectionQuestions)
    },
    onClearSelected() {
      this.selectedQuestionKeys = []
      this.selectionQuestions = []
    },
    loadData(arg, status) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      //update-begin--Author:kangxiaolin  Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
      var params = this.questionQueryParam
      console.log(params)
      var questionId = params.questionId
      var parameter = {
        questionnaire: params.questionnaire,
        wxUserId: params.wxUserId,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize
      }

      console.log(parameter)
      getAction(this.url.getInfoByQuestIdAndUserId, parameter).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          if (questionId != '' && questionId != undefined && questionId != null) {
            this.selectedQuestionKeys = getArrayElement(res.result.records, 'id')
            this.selectionQuestions = res.result.records
          }
          console.log(this.model)
          // console.log(this.selectedQuestionKeys)
          // console.log(res.result.records)
          this.ipagination.total = res.result.total
        } else {
          this.dataSource = null
        }
      })
    },
    getOrderMain() {
      console.log('数据改变')
      // this.queryParam.questionId = questionId
      this.questionQueryParam = Object.assign({}, this.model)
      this.loadData(1)
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      // if (null != that.model.resultPath && that.model.resultPath != '') {
        that.confirmLoading = true
        let httpurl = ''
        let method = ''
        if (!this.model.id) {
          httpurl += this.url.add
          method = 'post'
        } else {
          httpurl += this.url.edit
          method = 'put'
        }
        httpAction(httpurl, this.model, method).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          that.confirmLoading = false
          that.close()
        })
      // } else {
      //   that.showTips = true
      // }
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    }
  }
}
</script>

<style scoped>
.model_title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

.description {
  margin-bottom: 10px;
  line-height: 2;
}
</style>

<style>
.ques_list .ant-card-body {
  padding: 0 !important;
}
</style>