server-group / juveniles-report

<template>
  <a-card :bordered='false'>

    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <a-col :lg='7' :md='8' :sm='24' :xl='6'>
            <a-form-item label='问卷名称'>
              <j-input v-model='queryParam.subject' placeholder='请输入问卷名称'></j-input>
            </a-form-item>
          </a-col>
          <a-col :lg='7' :md='8' :sm='24' :xl='6'>
            <a-form-item label='类别'>
              <j-dict-select-tag v-model='queryParam.type' dictCode='topic_type' placeholder='请选择类别' />
            </a-form-item>
          </a-col>
          <a-col :lg='11' :md='12' :sm='24' :xl='10'>
            <a-form-item label='发布时间'>
              <j-date v-model='queryParam.pubDate_begin' :show-time='true' class='query-group-cust'
                      date-format='YYYY-MM-DD HH:mm:ss' placeholder='请选择开始时间'></j-date>
              <span class='query-group-split-cust'></span>
              <j-date v-model='queryParam.pubDate_end' :show-time='true' class='query-group-cust'
                      date-format='YYYY-MM-DD HH:mm:ss' placeholder='请选择结束时间'></j-date>
            </a-form-item>
          </a-col>
          <template v-if='toggleSearchStatus'>
            <a-col :lg='7' :md='8' :sm='24' :xl='6'>
              <a-form-item label='状态'>
                <j-dict-select-tag v-model='queryParam.status' dictCode='send_status' placeholder='请选择状态' />
              </a-form-item>
            </a-col>
            <a-col :lg='11' :md='10' :sm='24' :xl='10'>
              <a-form-item label='创建日期'>
                <j-date v-model='queryParam.createTime_begin' :show-time='true' class='query-group-cust'
                        date-format='YYYY-MM-DD HH:mm:ss' placeholder='请选择开始时间'></j-date>
                <span class='query-group-split-cust'></span>
                <j-date v-model='queryParam.createTime_end' :show-time='true' class='query-group-cust'
                        date-format='YYYY-MM-DD HH:mm:ss' placeholder='请选择结束时间'></j-date>
              </a-form-item>
            </a-col>
          </template>
          <a-col :lg='7' :md='8' :sm='24' :xl='6'>
            <span class='table-page-search-submitButtons' style='float: left;overflow: hidden;'>
              <a-button icon='search' type='primary' @click='searchQuery'>查询</a-button>
              <a-button icon='reload' style='margin-left: 8px' type='primary' @click='searchReset'>重置</a-button>
              <a-button icon='plus' style='margin-left: 8px' type='primary' @click='handleAdd'>新增</a-button>
              <a style='margin-left: 8px' @click='handleToggleSearch'>
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
              <a-dropdown v-if='selectedRowKeys.length > 0' style='margin-left: 10px'>
        <a-menu slot='overlay'>
          <a-menu-item key='1' @click='batchDel'>
            <a-icon type='delete' />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style='margin-left: 8px'> 批量操作
          <a-icon type='down' />
        </a-button>
      </a-dropdown>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>
        <i class='anticon anticon-info-circle ant-alert-icon'></i>
        <span>已选择</span>
        <a style='font-weight: 600'>
          {{ selectedRowKeys.length }}
        </a>
        <span>项</span>
        <a style='margin-left: 24px' @click='onClearSelected'>清空</a>
      </div>

      <a-table
        ref='table'
        :columns='columns'
        :dataSource='dataSource'
        :loading='loading'
        :pagination='ipagination'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        bordered
        rowKey='id'
        size='middle'
        @change='handleTableChange'>
        <!-- 字符串超长截取省略号显示 -->
        <span slot='subject' slot-scope='text'>
          <j-ellipsis :length='60' :value='text' />
        </span>
        <span slot='action' slot-scope='text, record'>
          <a v-if='record.status!=1' @click='handleEdit(record)'>编辑</a>
          <a-divider v-if='record.status!=1' type='vertical' />
          <a @click='handlePreview(record),modal.visible=true'>预览</a>
          <a-divider v-if='record.status==0 || record.status==2' type='vertical' />
          <a-popconfirm v-if='record.status==0 || record.status==2'
                        title='确定发布吗?' @confirm='() => handlePublish(record.id,1)'>
            <a>发布</a>
          </a-popconfirm>
          <a-divider v-if='record.status==1' type='vertical' />
          <a-popconfirm v-if='record.status==1' title='确定撤回发布吗?' @confirm='() => handlePublish(record.id,2)'>
            <a>撤回</a>
          </a-popconfirm>
          <a-divider type='vertical' />
          <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <questionnaire-modal ref='modalForm' @ok='modalFormOk'></questionnaire-modal>
    <j-modal
      :title='modal.title'
      :visible.sync='modal.visible'
      :width='800'
    >
      <template>
        <div class='scroll_area'>
          <p class='description'>
            {{ modal.description }}
          </p>
          <a-row v-for='(question,i) in questionDataSource' :key='i'>
            <a-col :span='24'>
              <p class='title'>{{ i + 1 }}. {{ question.question }}</p>
              <a-row v-for='(option,j) in question.options' :key='j'>
                <a-col :span='24'>
                  <p class='option'>{{ option.number }}. {{ option.options }}</p>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
      </template>
    </j-modal>
  </a-card>
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import QuestionnaireModal from './modules/QuestionnaireModal'
import { getAction, postAction } from '@api/manage'
import JEllipsis from '@/components/jeecg/JEllipsis'
import { filterDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'

export default {
  name: 'QuestionList',
  mixins: [JeecgListMixin],
  components: {
    QuestionnaireModal,
    JEllipsis
  },
  data() {
    return {
      description: '题库管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '问卷名称',
          align: 'center',
          dataIndex: 'subject',
          key: 'subject',
          scopedSlots: { customRender: 'subject' }
        },
        {
          title: '类别',
          align: 'center',
          dataIndex: 'type_dictText'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status_dictText'
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '发布时间',
          align: 'center',
          dataIndex: 'pubDate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 200,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/publish/questionnaire/list',
        delete: '/publish/questionnaire/delete',
        deleteBatch: '/publish/questionnaire/deleteBatch',
        exportXlsUrl: '/publish/questionnaire/exportXls',
        importExcelUrl: 'publish/questionnaire/importExcel',
        publish: '/publish/questionnaire/publish',
        queryQuestionsByIds: '/publish/question/queryQuestionsByIds'
      },
      dictOptions: {},
      superFieldList: [],
      modal: {
        title: '',
        visible: false
      },
      questionDataSource: [],
      answerDictOptions: []
    }
  },
  created() {
    // this.initDictConfig()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    initDictConfig() {
      //初始化字典 - 性别
      initDictOptions('answer_number').then((res) => {
        if (res.success) {
          this.answerDictOptions = res.result
        }
      })
    },
    handleAdd: function() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
      this.$nextTick(() => {
        this.$refs.modalForm.getOrderMain()
      })
    },
    handleEdit: function(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
      this.$nextTick(() => {
        this.$refs.modalForm.getOrderMain()
      })
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'createBy', text: '创建人', dictCode: '' })
      fieldList.push({ type: 'datetime', value: 'createTime', text: '创建日期' })
      fieldList.push({ type: 'string', value: 'updateBy', text: '更新人', dictCode: '' })
      fieldList.push({ type: 'datetime', value: 'updateTime', text: '更新日期' })
      fieldList.push({ type: 'Text', value: 'subject', text: '问卷名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'questionId', text: '题库ID', dictCode: '' })
      fieldList.push({ type: 'datetime', value: 'pubDate', text: '发布时间' })
      fieldList.push({ type: 'int', value: 'type', text: '类型', dictCode: 'topic_type' })
      fieldList.push({ type: 'string', value: 'status', text: '状态', dictCode: 'send_status' })
      this.superFieldList = fieldList
    },
    //发布和撤回
    handlePublish: function(id, status) {
      if (!this.url.publish) {
        this.$message.error('请设置url.publish属性!')
        return
      }
      var that = this
      postAction(that.url.publish, { id: id, status: status }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          that.reCalculatePage(1)
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    //预览
    handlePreview: function(record) {
      console.log(record)
      getAction(this.url.queryQuestionsByIds, {
        id: record.questionId,
        questionId: record.questionId
      }).then((res) => {
        console.log(res)
        if (res.success) {
          this.modal.title = record.subject
          this.modal.description = record.description
          this.questionDataSource = res.result
          var questions = res.result
          if (null != questions && questions.length > 0) {
            for (const q of questions) {
              if (null != q.options && q.options.length > 0) {
                for (const option of q.options) {
                  option.number = filterDictText(this.answerDictOptions, option.number)
                }
              }
            }
          }
        } else {
          this.questionDataSource = null
        }
      })
    }
  }
}
</script>
<style scoped>

.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}

.scroll_area {
  max-height: 600px;
  padding-right: 10px;
  overflow-y: auto;
}

.description {
  margin-bottom: 10px;
  line-height: 2;
  text-indent: 2em;
}

.title {
  margin: 5px 0;
  padding: 6px 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  color: #333;
  line-height: 1.5;
}

.option {
  margin: 0;
  padding-left: 20px;
  line-height: 2;
}
</style>