demo/demo-web-ui/src/views/postManage/postManage.vue

<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <el-tabs
        class="my-tabs"
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="自主学习计划" name="roleList">
          <el-select
            v-model="sid"
            class="addinputw"
            placeholder="请选择你要查询的计划"
            style="width: 300px"
          >
            <el-option
              v-for="(item, i) in formList"
              :key="i"
              :label="item.planContent"
              :value="item.sid"
            />
          </el-select>
          <el-button style="margin-left: 20px" type="primary" @click="toLook()"
            >查询</el-button
          >
          <div class="container">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                label="序号"
                width="70px"
                type="index"
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" width="150px" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="editRow(scope.row)"
                  >
                    编辑
                  </el-button>
                  <!-- <el-button type="primary" size="mini" @click="detail(scope.row)">
                    查看
                  </el-button> -->
                </template>
              </el-table-column>
              <el-table-column
                prop="studentNo"
                label="学生学号"
                align="center"
              />
              <el-table-column
                prop="planContent"
                label="学习计划"
                align="center"
              />
              <el-table-column
                prop="planContentJd"
                label="学习进度"
                align="center"
              />
              <el-table-column
                prop="planOpinionYj"
                label="反馈意见"
                align="center"
              />
            </el-table>
          </div>
        </el-tab-pane>
        <!-- 新增进度 -->
        <el-tab-pane label="进度管理" name="addrole">
          <table class="e-table" cellspacing="0">
            <tr>
              <td>学习计划</td>
              <td>
                <el-select
                  v-model="form.planSid"
                  class="addinputw"
                  placeholder="请选择学习计划"
                  style="width: 300px"
                >
                  <el-option
                    v-for="(item, i) in formList"
                    :key="i"
                    :label="item.planContent"
                    :value="item.sid"
                  />
                </el-select>
              </td>
            </tr>
            <tr>
              <td>进度内容</td>
              <td>
                <el-input
                  v-model="form.planContent"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>反馈意见</td>
              <td>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  v-model="form.planOpinion"
                ></el-input>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center">
            <el-button type="primary" @click="save()">保存</el-button>
          </div>
        </el-tab-pane>

        <!-- 编辑进度 -->
        <el-dialog
          :title="dialogTitle + '学习计划'"
          :visible.sync="editDialog"
          width="40%"
        >
          <table class="e-table" cellspacing="0">
            <tr>
              <td>学习计划</td>
              <td>
                <el-select
                  v-model="form.planSid"
                  class="addinputw"
                  placeholder="请选择学习计划"
                  style="width: 300px"
                >
                  <el-option
                    v-for="(item, i) in formList"
                    :key="i"
                    :label="item.planContent"
                    :value="item.sid"
                  />
                </el-select>
                <!-- <span>{{form.teacherNo}}</span> -->
              </td>
            </tr>
            <tr>
              <td>学习进度</td>
              <td>
                <!-- <span>{{form.studentNo}}</span> -->
                <el-input
                  v-model="form.planContent"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>反馈意见</td>
              <td>
                <!-- <span>{{form.planContent}}</span> -->
                <el-input
                  v-model="form.planOpinion"
                  style="width: 300px"
                ></el-input>
              </td>
            </tr>
          </table>
          <div style="margin-top: 20px; text-align: center">
            <el-button type="primary" @click="save1()">保存</el-button>
          </div>
        </el-dialog>
      </el-tabs>
    </div>
    <!-- <organizationManageInfo v-show="viewState ==4" ref="divInfo" @doback="resetState" /> -->
  </div>
</template>

<script>
import {
  selectSysPlan,
  selectSysPlanComment,
  saveSysPlan,
} from "@/api/system/region/region.js";
// import organizationManageInfo from './organizationManageInfo.vue'
export default {
  components: {
    // organizationManageInfo,
  },
  data() {
    return {
      viewState: 1,
      activeName: "roleList",
      dialogTitle: "",
      editDialog: false,
      form: {},
      formBackup: Object.assign({}, this.form),
      tableData: [],
      formList: [],
      sid: "",
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    getPageList() {
      // 获取列表
      selectSysPlan().then((res) => {
        this.formList = res.data;
      });
    },
    toLook() {
      console.log(this.sid);
      if (this.sid.length >= 1) {
        selectSysPlanComment(this.sid).then((res) => {
          console.log(res);
          this.tableData = res.data;
        });
      } else {
        this.$message({
          message: "请选择你要查询的学习计划",
          type: "warning",
        });
      }
    },
    handleClick(tab, event) {
      if (tab.name == "addrole") {
        this.dialogTitle = "新增";
        this.roleForm = Object.assign({}, this.formBackup);
      } else {
        this.getPageList();
      }
    },
    save() {
      console.log("form", this.form);
      if (this.form.planSid != null) {
        saveSysPlan(this.form).then((res) => {
          this.activeName = "roleList";
          this.getPageList();
          this.$message({
            message: res.msg,
            type: "success",
          });
        });
      } else {
        this.$message({
          message: "请选择学习计划",
          type: "warning",
        });
      }

      this.reset();
    },
    save1() {
      if (this.form.planSid != null) {
        saveSysPlan(this.form).then((res) => {
          this.editDialog = false;
          this.getPageList();
          this.$message({
            message: res.msg,
            type: "success",
          });
        });
      } else {
        this.$message({
          message: "请选择学习计划",
          type: "warning",
        });
      }
    },
    reset() {
      this.form = {};
    },
    resetState() {
      this.viewState = 1;
    },
    editRow(row) {
      this.dialogTitle = "编辑";
      this.editDialog = true;
      console.log(row);
      // this.form = Object.assign({}, row);
    },
    detail(row) {
      this.viewState = 4;
      this.$refs["divInfo"].showAdd(row);
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.my-tabs {
  margin-top: 10px;
}
</style>