fe-manage/src/views/examine/CourseReviewed.vue

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-11-16 20:59:06
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-11-16 21:08:27
 * @FilePath: /fe-manage/src/views/examine/CourseReviewed.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<!-- 已审核课程页面 -->
<template>
  <div class="coursereviewed">
    <div class="tmpl">
      <div class="tmpl_header">
        <div class="tmplh_inp">
          <div class="inpbox">
            <div class="inpbox1">
              <a-select v-model:value="valueproj" value-key="value"
                :options="[{ label: '请选择内容分类', value: '' }, ...calssifyList]" />
            </div>
            <div class="inpbox1">
              <a-input v-model:value="valuecreater" style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                " placeholder="请输入创建人" />
            </div>
            <div class="inpbox1">
              <a-input v-model:value="valuename" style="
                  width: 270px;
                  height: 40px;
                  border-radius: 8px;
                  margin-right: 14px;
                " placeholder="请输入名称" />
            </div>
          </div>
        </div>
        <div class="tmplh_btn">
          <div class="btn btn1" @click="getList">
            <div class="search"></div>
            <div class="btnText btnText1">搜索</div>
          </div>
          <div class="btn btn2" @click="reset">
            <div class="search"></div>
            <div class="btnText btnText2">重置</div>
          </div>
        </div>
      </div>
      <div class="tmpl_body">
        <div class="tmpl_tabbox">
          <a-table :columns="columns1" :data-source="tableData1" :loading="tableDataTotal === -1 ? true : false"
            expandRowByClick="true" @expand="expandTable" :scroll="{ x: 1300 }" :pagination="false" />
        </div>
        <div class="tableBox">
          <div class="pa">
            <a-pagination v-if="total > 10" showSizeChanger="true" show-quick-jumper :pageSize="pageSize"
              v-model:current="currentPage" :total="total" class="pagination" @change="changePagination" />
          </div>
        </div>
      </div>
    </div>
     <!-- 审核日志弹窗 -->
     <a-modal
        v-model:visible="projAuditModal"
        :footer="null"
        :closable="closeBack"
        wrapClassName="projAuditModal"
        centered="true"
      >
        <div class="delete">
          <div class="del_header"></div>
          <div class="del_main">
            <div class="header">
              <div class="icon"></div>
              <span>审核记录</span>
              <!-- <div class="close_exit" @click="closeProjAuditModal"></div> -->
            </div>
            <div class="body">
              <a-table
                  style="width: 90%"
                  :columns="columnsAudit"
                  :data-source="tableDataAudit"
                  :loading="tableDataTotalAudit === -1 ? true : false"
                  expandRowByClick="true"
                  :scroll="{ y: 150 }"
                  @expand="expandTable"
                  :pagination="false"
              />
            </div>
            <div class="del_btnbox">
              <div class="del_btn btn1" @click="closeProjAuditModal">
                <div class="btnText">取消</div>
              </div>
              <div class="del_btn btn2" @click="closeProjAuditModal">
                <div class="btnText">确定</div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { courseListView } from "../../api/indexAudit";
import * as api1 from "@/api/index1";

export default {
  name: "CoursereViewed",

  setup() {
    const state = reactive({
      calssifyList: [], //分类字典
      valueproj: "",
      valuecreater: "",
      valuename: "",
      currentPage: 1,
      total: null,
      pageSize: 10,
      //审核记录的表
      columnsAudit: [
        {
          title: "审核人",
          dataIndex: "createName",
          key: "createName",
          align: "center",
        },

        {
          title: "审核状态",
          dataIndex: "status",
          key: "status",
          align: "center",
          customRender: ({record: {status}}) => <div>{{'2': '审核通过', '-2': '审核拒绝'}[(status + '')]}</div>,
        },

        {
          title: "审核时间",
          dataIndex: "createTime",
          key: "createTime",
          align: "center",
          width: 220
        },

        {
          title: "备注",
          dataIndex: "description",
          key: "description",
          align: "center",
        },
      ],
      columns1: [
        {
          title: "序号",
          dataIndex: "number",
          key: "number",
          align: "center",
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          align: "center",
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          align: "center",
        },
        {
          title: "内容分类",
          dataIndex: "content",
          key: "content",
          align: "center",
          customRender: ({ text }) => state.calssifyList.find(e => e.value == text)?.label,
        },
        {
          title: "审核状态",
          dataIndex: "status",
          key: "status",
          align: "center",
        },
        {
          title: "创建人",
          dataIndex: "creater",
          key: "creater",
          align: "center",
        },
        {
          title: "审核时间",
          dataIndex: "time",
          key: "time",
          align: "center",
          customRender: (time) => {
            return <div style="color:#387DF7">{time.record.time}</div>;
          },

        },
        {
          title: "审核说明",
          dataIndex: "msg",
          key: "msg",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "opt",
          key: "opt",
          align: "center",
          customRender: (value) => {
            return <div 
            style="color:#387DF7;cursor:pointer;" 
            onClick={() => {
              console.log(value)
                      showProjAuditModal(value.record.auditLogDtoList);
                    }}>审核日志</div>;
          },
        },
      ],
      tableData1: [
        // {
        //   number: "1",
        //   name: "课程1",
        //   type: "在线",
        //   content: "领导力/领导业务",
        //   status: "通过",
        //   creater: "-",
        //   time: "-",
        //   msg: "-",
        // },
      ],
      //审核记录的数据
      tableDataAudit: [],
      projAuditModal: false,
    });
    const getList = () => {
      let objn = {
        auditStatus: 0,
        categoryId: Number(state.valueproj),
        createName: state.valuecreater,
        name: state.valuename,
        pageNo: state.currentPage,
        pageSize: 10,
      };
      console.log(objn)
      courseListView(objn)
        .then((res) => {
          console.log("获取已审核课程成功", res.data.data);
          state.total = res.data.data.total;
          setTableData(res.data.data.rows);
        })
        .catch((err) => {
          console.log("获取已审核课程失败", err);
        });
    };
    const setTableData = (table) => {
      if (!table || !table.length) {
        state.tableData1 = []
        return
      }
      let data = table;
      let array = [];
      data.map((item, n) => {
        let obj = {
          number: n+1 + (state.currentPage-1) *10,
          name: item.name || "- ",
          type: item.type == 1 ? "线上" : "线下",
          content: item.categoryId,
          status:
            item.auditStatus == 0
              ? "未提交"
              : item.auditStatus == 1
                ? "提交待审核"
                : item.auditStatus == 2
                  ? "通过"
                  : item.auditStatus == -1
                    ? "拒绝"
                    : "-",
          creater: item.createName,
          time: item.createTime,
          msg: item.description || "-",
          auditLogDtoList: item.auditLogDtoList
        };
        array.push(obj);
      });
      state.tableData1 = array;
      console.log(data)
    };
    const reset = () => {
      (state.valueproj = ''),
        (state.valuecreater = null),
        (state.valuename = null),
        getList();
    };
    const changePagination = (pagina) => {
      state.currentPage = pagina;
      getList();
    };
    const getDictList = (param) => api1.getDict({
      pageNo: 1,
      pageSize: 20,
      setCode: param
    }).then((res) => res.data.data.rows)

    onMounted(async () => {
      getList();
      //获取分类列表
      state.calssifyList = (await getDictList("faceclassClass")).map(e => ({ label: e.dictName, value: e.dictCode }))
    });

    // 显示审核
    const showProjAuditModal = (data) => {
      state.tableDataAudit = data
      state.projAuditModal = true;
    };

    const closeProjAuditModal = () => {
      state.projAuditModal = false;
    };

    return {
      ...toRefs(state),
      getList,
      setTableData,
      reset,
      changePagination,
      showProjAuditModal,
      closeProjAuditModal
    };
  },
};
</script>
<style lang="scss">
.coursereviewed {
  width: 100%;

  .tmpl {
    width: 100%;

    .tmpl_header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 32px;

      margin-left: 32px;
      margin-right: 32px;

      .tmplh_inp {
        .inpbox {
          display: flex;
          margin-top: 32px;
          flex-wrap: wrap;

          .inpbox1 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24px;
            margin-top: 10px;

            .ant-select-selector {
              border-radius: 8px;
              width: 270px;
              height: 40px;
              padding-top: 5px;
            }

            span {
              white-space: nowrap;
            }
          }
        }
      }

      .tmplh_btn {
        display: flex;
        // margin-left: 38px;
        margin-top: 42px;

        .btn {
          padding: 0px 26px 0px 26px;
          height: 38px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          cursor: pointer;
          flex-shrink: 0;

          .search {
            background-size: 100%;
          }

          .btnText {
            font-size: 14px;
            font-weight: 400;
            line-height: 36px;
            margin-left: 5px;
          }

          .btnText1 {
            color: rgb(255, 255, 255);
          }

          .btnText2 {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn1 {
          background: #409eff;

          .search {
            width: 15px;
            height: 17px;
            background-image: url("../../assets/images/courseManage/search0.png");
          }
        }

        .btn2 {
          background: #ffffff;
          border: 1px solid #388be1;

          .search {
            width: 16px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/reset1.png");
          }
        }

        .btn1:hover {
          background: rgb(255, 255, 255);
          border: 1px solid #388be1;

          .search {
            background-image: url("../../assets/images/courseManage/search1.png");
          }

          .btnText {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn2:hover {
          background: rgba(64, 158, 255, 1);

          .search {
            background-image: url("../../assets/images/courseManage/reset0.png");
          }

          .btnText {
            color: #ffffff;
          }
        }
      }
    }

    .tmpl_body {
      padding: 0px 30px;

      .tmpl_tabbox {
        .operation {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #4ea6ff;

          .nselect {
            justify-content: center;
            align-items: center;
            display: flex;

            .jc {
              margin-left: 20px;
              white-space: nowrap;
              cursor: pointer;
            }
          }
        }
      }

      .pa {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}

.projAuditModal {
  .ant-modal {
    width: 816px !important;
    min-height: 420px !important;

    .ant-modal-content {
      width: 816px !important;
      min-height: 420px !important;

      .ant-modal-body {
        width: 816px !important;
        min-height: 420px !important;
        padding: 0 !important;

        .delete {
          z-index: 999;
          width: 816px;
          min-height: 420px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 68px;
            background: linear-gradient(
                    rgba(78, 166, 255, 0.2) 0%,
                    rgba(78, 166, 255, 0) 100%
            );
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/taskpage/gan.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }

            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;

              .ant-table-empty {
                width: 100% !important;
              }

              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }

            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;

              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-shrink: 0;
                cursor: pointer;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }

              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}

.projectviewed {
  width: 100%;

  .tmpl {
    width: 100%;

    .tmpl_header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 32px;

      margin-left: 32px;
      margin-right: 32px;

      .tmplh_inp {
        .inpbox {
          display: flex;
          flex-wrap: wrap;
          margin-top: 42px;

          .inpbox1 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24px;
            margin-top: 10px;

            .ant-select-selector {
              border-radius: 8px;
              width: 270px;
              height: 40px;
              padding-top: 5px;
            }

            span {
              white-space: nowrap;
            }
          }
        }
      }

      .tmplh_btn {
        display: flex;
        // margin-left: 38px;
        margin-top: 52px;

        .btn {
          padding: 0px 26px 0px 26px;
          height: 38px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          cursor: pointer;
          flex-shrink: 0;

          .search {
            background-size: 100%;
          }

          .btnText {
            font-size: 14px;
            font-weight: 400;
            line-height: 36px;
            margin-left: 5px;
          }

          .btnText1 {
            color: rgb(255, 255, 255);
          }

          .btnText2 {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn1 {
          background: #409eff;

          .search {
            width: 15px;
            height: 17px;
            background-image: url("../../assets/images/courseManage/search0.png");
          }
        }

        .btn2 {
          background: #ffffff;
          border: 1px solid #388be1;

          .search {
            width: 16px;
            height: 18px;
            background-image: url("../../assets/images/courseManage/reset1.png");
          }
        }

        .btn1:hover {
          background: rgb(255, 255, 255);
          border: 1px solid #388be1;

          .search {
            background-image: url("../../assets/images/courseManage/search1.png");
          }

          .btnText {
            color: rgba(64, 158, 255, 1);
          }
        }

        .btn2:hover {
          background: rgba(64, 158, 255, 1);

          .search {
            background-image: url("../../assets/images/courseManage/reset0.png");
          }

          .btnText {
            color: #ffffff;
          }
        }
      }
    }

    .tmpl_body {
      padding: 0px 30px;

      .tmpl_tabbox {
        .operation {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #4ea6ff;

          .nselect {
            justify-content: center;
            align-items: center;
            display: flex;

            .jc {
              margin-left: 20px;
              white-space: nowrap;
              cursor: pointer;
            }
          }
        }
      }

      .pa {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>