dy-admin-manager/src/views/setQuestions/index.vue

<template>
  <div class='m-container'>
    <h2>
      <div class="squrt"></div>问卷管理
    </h2>
    <div class="m-core">
        <el-button type="primary" @click="onQuestionOperation('create')"
           v-if="$helpers.permission('/operateManager/questionOperation/create')"
           class='newBand'>添加问卷</el-button>
        <save-form :inline="true"
               @submit="search"
               @reset="onReSet"
               ref="searchForm"
               :model="searchForm">
        <el-form-item prop="search">
            <el-input
                type="text"
                clearable
                v-model="searchForm.search"
                placeholder="问卷编号或名称"
            ></el-input>
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="searchForm.status"
                     filterable
                     placeholder="请选择问卷状态"
                     clearable>
            <el-option label="启用" :value="1"></el-option>
            <el-option label="停用" :value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           prop="id"
                           label="问卷编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.id }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="title"
                           label="问卷名称">
            <template slot-scope="scope">
              <!-- <copy-text>{{ scope.row.title }}</copy-text> -->
              <overflow-text :text="scope.row.title" ></overflow-text>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="status"
                           label="状态">
            <template slot-scope="scope">
              {{ scope.row.status ? '开启' : '关闭' }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope">
              <el-button @click="onQuestionOperation('look', scope.row)"
                         v-if="$helpers.permission('/operateManager/questionOperation/detail')"
                         type="text">详情</el-button>
              <el-button @click="onOperation(scope.row)"
                         v-if="$helpers.permission(scope.row.status ? 'questionnaireTopic/updateStatus/stop' : 'questionnaireTopic/updateStatus/start')"
                         type="text">{{ scope.row.status ? '停用' : '启用' }}</el-button>
              <!-- 启用的问卷不能修改 -->
              <el-button @click="onQuestionOperation('update', scope.row)"
                         v-if="$helpers.permission('/operateManager/questionOperation/update') && !scope.row.status"
                         type="text">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination sync :total.sync="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>

  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { questionnaireTopicQueryPage, questionnaireTopicUpdateStatus } from './api'
export default {
  name: 'branchSetting',
  components: { pagination },
  data () {
    return {
        searchForm: {
            search: null,
            status: null
        },
        tableList: [],
        pageInfo: {
            // 分页规则
            limit: 10, // 限制显示条数
            page: 1, // 当前页
            total: 0, // 总条数
            page_size: [10, 20, 40, 50] // 选择限制显示条数
        },
        organId: null,
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      questionnaireTopicQueryPage({
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        ...this.searchForm
      }).then(res => {
        if (res.code == 200 && res.data) {
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    onQuestionOperation(type, row) {
        let str = '问卷'
        if(type == 'create') {
          str = '添加' + str
        } else if(type == 'update') {
          str = '修改' + str
        } else if(type == 'look') {
          str = '查看' + str
        }
        let params = {
          type
        }
        if(type == 'update' || type == 'look') {
          params.id = row.id
        }
        this.$router.push({
            path: '/operateManager/questionOperation',
            query: params
        }, (router) => {
            router.meta.title = str;
        })
    },
    async onOperation(row, type) {
      let str = row.status ? '停用' : '启用'
      this.$confirm(`是否${str}该问卷？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
            let status = row.status ? 0 : 1
            await questionnaireTopicUpdateStatus({ topicId: row.id, status: status })
            this.$message.success(str + '成功')
            this.getList()
        } catch {
          //
        }
      })
    },
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs['searchForm'].resetFields();
      this.search();
    },

  }
}
</script>
<style lang="scss" scoped>
/deep/.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
/deep/.el-select {
  width: 98% !important;
}
</style>