psychological-competence/src/components/manage/main/cognitiveTaskMgr.vue

<template>
  <!--**lxh-查询机构下所有认知任务-->
  <div>
    <div class="headerRow">
      <el-input
        placeholder="请输入认知任务名称"
        v-model="wKeyword"
        class="input-with-select ml10"
        style="width: 1.5rem"
        size="small"
        @keyup.enter.native="onSubmit"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchAllCognitiveTask"
        />
      </el-input>
      <el-button
        class="ml10"
        icon="el-icon-refresh"
        @click="reset"
        size="small"
      />
    </div>
    <!--记录展示start-->
    <el-table
      :header-cell-style="{ background: '#F6F7FB', color: '#606266' }"
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px"
      class="table-padding"
      size="small"
    >
      <el-table-column
        prop="name"
        label="认知任务名称"
        align="center"
        width="480"
      />
      <el-table-column prop="description" label="简介" align="left" />
      <el-table-column label="操作" width="240px" align="center">
        <template slot-scope="scope">
          <el-button plain size="small" @click="editHandle(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--记录展示end-->

    <!--分页插件-->
    <div class="txt-center" style="margin-top: 20px">
      <el-pagination
        background
        size="small"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>

    <!-- 认知任务简介设置弹窗 -->
    <el-dialog
      :title="`${formTitle}  - 简介修改`"
      :visible.sync="descriptionVisible"
      append-to-body
    >
      <el-input
        type="textarea"
        v-model="description"
        placeholder="请输入简介"
        rows="8"
        style="margin: 16px 0"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="descriptionVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="saveDescription"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "CognitiveTaskMgr",
  data() {
    return {
      categoryList: [], //认知任务类型列表
      keyword: "",
      currentType: "ALL",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      institutionNo: "",
      type: "0",
      flag: "",
      targetId: "",
      description: "",
      descriptionVisible: false,
      formTitle: "",
      rulesSettingList: [],
      wKeyword: "",
    };
  },
  /*页面初始化*/
  created() {
    this.institutionNo = sessionStorage.getItem(
      "f7a42fe7211f98ac7a60a285ac3a9527"
    );
    this.getAllCognitiveTask();
  },
  methods: {
    ...mapActions({
      setSacleListName: "setSacleListName",
    }),

    // 查询全部认知任务
    getAllCognitiveTask() {
      this.$http.get(
        `subjectInfo/getCognizeListByName?categoryEname=CALL&scaleName=${this.wKeyword}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
        {},
        (response) => {
          console.log("response: ", response);
          this.tableData = response.data.data;
          this.total = response.data.allNum;
        },
        (err) => {
          console.log(err);
          this.loading = false;
        }
      );
    },
    searchAllCognitiveTask() {
      this.pageNum = 1;
      this.getAllCognitiveTask();
    },

    // 重置预警认知任务搜索
    reset() {
      this.wKeyword = "";
      this.searchAllCognitiveTask();
    },

    // 全部认知任务分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllCognitiveTask();
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllCognitiveTask();
    },

    // 编辑认知任务阈值
    editHandle(row) {
      this.targetId = row.id;
      this.formTitle = row.name;
      this.description = row.description;
      this.descriptionVisible = true;
    },

    // 保存修改后的评分规则信息
    saveDescription() {
      this.$http.post(
        "cognitive/updateCognitiveTask",
        {
          id: this.targetId,
          description: this.description,
        },
        () => {
          this.getAllCognitiveTask();
          this.$message.success("修改成功");
          this.descriptionVisible = false;
        }
      );
    },
  },
};
</script>

<style scoped>
.button-pub-select {
  color: #ffffff !important;
  border-bottom-right-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.button-pub {
  color: #ffffff !important;
  border-radius: 4px !important;
}

::v-deep .el-button--primary {
  color: #fff;
  border-radius: 4px !important;
}

::v-deep .el-table thead {
  color: #f6f7fb;
  font-weight: 500;
  background-color: #5c6ca9 !important;
}

::v-deep .el-pager li.active {
  color: #ffffff;
  cursor: default;
  background-color: #007eff;
}

::v-deep .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #ffffff;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
  border: 1px solid #dfe0e4;
}

.pageNation {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-padding {
  height: calc(100vh - 1.4rem) !important;
  overflow: auto !important;
  overflow-x: hidden !important;
}
</style>