完整的题库管理vue代码

<template>
  <div>
    <!-- <h1>这是一个标题</h1> -->
    <!-- 导航  Question-->
    <!-- 这是最外层的一个面包屑标签 -->
    <el-breadcrumb>
      <!-- 第二层item项 -->
      <el-breadcrumb-item>
        <!-- 第三层最里面的路由 可以实现页面跳转的功能，跳转到首页  -->
        <router-link to="./">首页</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item> 题库管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主体内容 -->
    <div class="content">
      <!--  inline 行内表单模式  布尔类型
      label-position  表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width. string类型 
     size   用于控制该表单内组件的尺寸 -->
      <!-- 灰色条代码段 -->
      <el-form
        inline
        label-position="right"
        label-width="60px"
        size="small"
        class="query-form"
      >
        <!-- 搜索 输入框 -->
        <el-form-item label="搜索">
          <el-input v-model="key" placeholder="请输入关键词语"></el-input>
        </el-form-item>
        <!--  按钮  单击事件 selList-->
        <el-form-item>
          <el-button type="primary" @click="selList()">查询</el-button>
          <!-- 给按钮 加属性 -->
          <el-button
            type="success"
            @click="
              dialogVisible = true;
              form = { isEnable: true };
            "
            >新增</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 列表查询 复制 -->
      <el-card class="box-card table">
        <div slot="header" class="clearfix">
          <span>题库管理</span>
        </div>

        <el-tabs v-model="query.positionID" @tab-click="tabClick()">
          <el-tab-pane
            :label="item.name"
            :name="item.id.toString()"
            v-for="item in typeList"
            :key="item.id"
          ></el-tab-pane>
        </el-tabs>
        <!-- 列表展示列名的代码顶部  列表定义  C#程序中接口读取的数据在这里展示.  -->
        <el-table
          v-loading="loading"
          :data="tableData"
          ref="tableData"
          border
          stripe
          style="width: 100%"
        >
          <!-- name 小写 列表展示内容的vue组件 column 使用 -->
          <el-table-column prop="title" label="题目名称"></el-table-column>
          <!-- 4 选项 -->
          <el-table-column prop="selectA" label="选项A"></el-table-column>

          <el-table-column prop="selectB" label="选项B"></el-table-column>
          <el-table-column prop="selectC" label="选项C"></el-table-column>
          <el-table-column prop="selectD" label="选项D"></el-table-column>
          <!-- 正确选项 -->
          <el-table-column prop="correctKey" label="正确选项"></el-table-column>
<!-- 
          <el-table-column prop="sort" label="排序"></el-table-column> -->
          <!-- 是否可用列名 字段 -->
          <el-table-column prop="isEnable" label="是否可用">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.isEnable == true"
                >是</el-tag
              >
              <el-tag type="warn" v-else>否</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="添加时间"></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip content="编辑" placement="top">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editClick(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  type="warning"
                  size="mini"
                  icon="el-icon-delete"
                  @click="delClick(scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 列表展示列名的代码底部   -->

        <!-- 分页条 -->
        <div class="block" style="margin-top: 20px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes,prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
     <!-- 上面为展示，一切展示不出来问题，找上面代码 -->
     <!-- 下面是对话框，一切对话框问题找form表单对话框 -->
    <!-- form表单  操作对话框 C#实体框架类需要展示的字段，需要从这里修改-->
    <!-- 三元表达式  -->
    <el-dialog
      :title="form.id > 0 ? ‘编辑题库管理‘ : ‘添加题库管理‘"
      :visible.sync="dialogVisible"
      @opened="dialogOpened()"
    >
      <!-- 表单事件     -->
      <el-form
        :model="form"
        ref="form"
        label-width="100px"
        :status-icon="true"
        @submit.native.prevent="submitForm(‘form‘)"
      >
        <!-- name 分类名称字段，对应的是C# 数据库中的name字段，这是一一对应关系  1 这里对应的是title，不是名字 -->
        <el-form-item
          label="题目名称"
          prop="title"
          :rules="[{ required: false, message: ‘请输入题目名称‘ }]"
        >
          <el-input
            v-model="form.title"
            placeholder="请输入题目名称"
          ></el-input>
        </el-form-item>

        <!-- select a 1  form点prop验证的变量字段，就可以不同时修改的了 -->
        <el-form-item
          label="选项a"
          prop="selectA"
          :rules="[{ required: true, message: ‘请输入选项a‘ }]"
        >
          <!-- 输入框 -->
          <el-input v-model="form.selectA" placeholder="请输入选项"></el-input>
        </el-form-item>

        <!-- select b -->
        <el-form-item
          label="选项b"
          prop="selectB"
          :rules="[{ required: true, message: ‘请输入选项b‘ }]"
        >
          <!-- 输入框 -->
          <el-input v-model="form.selectB" placeholder="请输入选项"></el-input>
        </el-form-item>

        <el-form-item
          label="选项c"
          prop="selectC"
          :rules="[{ required: false, message: ‘请输入选项c‘ }]"
        >
          <!-- 输入框 -->
          <el-input v-model="form.selectC" placeholder="请输入选项"></el-input>
        </el-form-item>

        <el-form-item
          label="选项d"
          prop="selectD"
          :rules="[{ required: false, message: ‘请输入选项d‘ }]"
        >
          <!-- 输入框 -->
          <el-input v-model="form.selectD" placeholder="请输入选项"></el-input>
        </el-form-item>

        <!-- 正确选项 -->
        <el-form-item
          label="正确选项"
          prop="correctKey"
          :rules="[{ required: true, message: ‘请选择正确选项‘ }]"
        >
          <!-- sellist 修改 输入框 可以直接替代input   -->
          <el-select
            v-model="form.correctKey"
            style="width: 100%"
            multiple
            placeholder="请选择正确选项"
          >
            <el-option
              v-for="item in sellist"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 所属岗位分类    属于哪一分类  要展示出来 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="所属岗位"
              prop="positionID"
              :rules="{ required: true, message: ‘不能为空‘ }"
            >
              <el-select
                v-model="form.positionID"
                placeholder="请选择类型"
                filterable
              >
                <el-option
                  v-for="item in typeList"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 所属分类底部 -->

        <!-- 学校标签借用 -->
        <!-- <el-form-item label="所属岗位" prop="labelList">
          <el-select
            v-model="form.labelList"
            placeholder="请选择所属岗位"
            clearable
            filterable
            multiple
            style="width: 100%"
          >
            <el-option
              v-for="item in labellist"
              :label="item.label"
              :value="item.label"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- 学校标签底部 -->

        <!-- 简介顶部 -->
        <!-- <el-form-item label="简介" prop="summary">
          <el-input
            v-model="form.summary"
            placeholder="请输入简介内容"
          ></el-input>
        </el-form-item> -->
        <!-- 简介底部 -->

        <el-form-item label="排序字段" prop="sort">
          <el-input
            v-model.number="form.sort"
            placeholder="请输入排序字段"
          ></el-input>
        </el-form-item>
        <!-- 是否可用顶部  2层  must 必须的 -->
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item
              prop="isEnable"
              label="是否可用"
              :rules="[{ required: true, message: ‘‘ }]"
            >
              <el-switch v-model="form.isEnable"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 是否可用功能组件底部 -->
        <el-form-item>
          <el-button type="primary" :loading="submiting" native-type="submit"
            >提交</el-button
          >
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 复制底部 -->
  </div>
</template>


<script>
import url from "@/plugins/urlHelper.js";
// 1 富文本组件导入
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: { VueUeditorWrap }, //2 组件使用
  //data 必须是一个函数
  data() {
    return {
      // 多选的JavaScript代码 data中的代码
      sellist: [
        { id: 1, name: "A" },
        { id: 2, name: "B" },
        { id: 3, name: "C" },
        { id: 4, name: "D" },
      ], //选项
      // 3 增加富文本
      editorConfig: {
        initialFrameHeight: 500, //设置高度
        initialFrameWidth: "100%", //设置宽度
        UEDITOR_HOME_URL: url.getUEConfig(),
        serverUrl: url.getUE(),
      },
      domain: url.getDomain(),
      key: "",
      query: { positionID: "1" }, //对象  枚举类 字段 data中的写入
      loading: false,
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      form: {}, //表单对象
      dialogVisible: false,
      submiting: false,
      typeList: [],

      labellist: [], //标签所属岗位

      id: 0,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage4 = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.getList();
    },
    //筛选
    filterTag(filter) {
      var val = filter["isEnable"][0];
      this.form.isEnable = val;
      //刷新列表
      this.getList();
    },
    // 获取所属岗位 函数
    getSchLabelList: function () {
      var _this = this;
      var modelid = 5;
      var link = url.getKnow("GetType_QuestionEnum"); // 接口方法去看原来的C#
      $.get(link, { modelid: modelid }, (data) => {
        _this.labellist = data;
      });
    },
    //排序
    sortChange(sortColumn) {
      this.form.sort = sortColumn.prop;
      this.form.order = sortColumn.order;
      //刷新列表
      this.getList();
    },
    //获取枚举类文章类型列表的函数 方法  1 枚举类
    initData: function () {
      var _this = this;
      var link = url.getKnow("GetType_QuestionEnum"); //2 C#方法引入。修改类型控制器。 接口。
      $.get(link, {}, (data) => {
        _this.typeList = data;
      });
    },
    // 查询列表 获取分页列表函数 方法
    getList: function () {
      var _this = this;
      _this.loading = true;
      var params = _this.query;
      params.pageindex = _this.currentPage4;
      params.pagesize = _this.pageSize;
      params.key = _this.key;
      // console.info(params)
      var link = url.getKnow("GetList_Question"); // 控制器文件。C#接口 1 修改控制器为需要的接口方法

      $.get(link, params, (data) => {
        _this.loading = false;
        _this.tableData = data.list;
        _this.total = data.total;
      });
    },
    //搜索查询
    selList: function () {
      this.currentPage4 = 1;
      this.getList();
    },
    // 切换函数的定义。 分类的切换
    tabClick: function () {
      (this.tableData = []), this.getList();
    },

    //上传文件
    dialogOpened: function () {
      var _this = this;

      // 上传图片的 if 条件与语句
      if ($("#uploadBtn2 input").length == 0) {
        $("#uploadBtn2").uploader({
          url: url.getUpload(),
          text: "上传图片",
          fileExts: "jpg;png;",
          type: "dialog", // 剪切图片增加的JavaScript代码部分
          coverParams: {
            targetWidth: 100, //  目标宽度
            targetHeight: 100,
          }, // 剪切图片js底部

          maxSize: 1024 * 1024 * 100,
          onSuccess: function (data) {
            var src = url.getDomain() + data.relativeName;
            _this.$set(_this.form, "imgUrl", data.relativeName);
          },
        });
      }
    },

    //提交表单
    submitForm(formName) {
      var _this = this;
      var link = url.getKnow("Save_Question"); //添加方法C# 修改这里的控制器。接口添加。
      var info = this.form;
      info.correctKey = info.correctKey.toString();
      // console.info(info);
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submiting = true;
          //提交后台添加
          //添加或者修改
          $.post(link, info, (res) => {
            _this.submiting = false;
            if (res.status) {
              _this.dialogVisible = false;
              _this.getList();
              _this.$message({
                type: "success",
                message: res.msg,
              });
            } else {
              _this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //编辑事件  函数  页面点击可以编辑，修改的地方

    // editClick: function (row) {
    //   //this.form = Object.assign({}, row);
    //   this.dialogVisible = true;
    //   var _this = this; // 变量声明
    //   var id = row.id; // row 这一行
    //   var link = url.getKnow("GetModel_KnowCate"); // 对应C#中是 获取对象的接口方法
    //   $.get(link, { id: id }, (res) => {
    //     _this.form = res;
    //   });
    // },

    //编辑 函数
    editClick: function (row) {
      var _this = this;
      _this.dialogVisible = true;
      var link = url.getKnow("GetModel_Question"); // C#中获取对象接口方法的调用访问
      var id = row.id;
      $.get(link, { id: id }, (data) => {
        if (data.correctKey) {
          data.correctKey = data.correctKey.split(",");
        }
        _this.form = data;
      });
    },

    //删除
    delClick: function (row) {
      var _this = this;
      var link = url.getKnow("Delete_KnowCate"); //获取请求地址 5 这里面的控制器，接口方法都要修改的。
      var id = row.id; //获取对象id  C# 里面删除的也是id ，不是IDS字符串
      console.info(id);

      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        concelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $.post(link, { id: id }, (res) => {
            // 第一个id对应C#中删除方法（)小括号里面接收的参数 id.
            if (res.status) {
              _this.dialogVisible = false;
              _this.getList();
              _this.$message({
                type: "success",
                message: res.msg,
              });
            } else {
              _this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    // 获取视频类型
    this.initData();
    //获取服务器列表
    this.getList();

    // 所属岗位
    this.getSchLabelList();
  },
};
</script>