This commit is contained in:
zhangyc
2022-11-16 08:30:01 +08:00
20 changed files with 2001 additions and 2070 deletions

View File

@@ -1,210 +1,300 @@
<template>
<a-drawer
:visible="addcaseVisible"
class="drawerStyle addcaseDrawer"
width="80%"
title="添加案例"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">添加案例</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<div class="main_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">案例标题</div>
<div class="fi_input">
<a-input
v-model:value="inputV1"
style="width: 264px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
/>
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="main_table">
<a-table
class="ant-table-striped"
:row-class-name="
(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
"
:row-selection="rowSelection"
:columns="columns1"
:data-source="tableData1"
:loading="tableDataTotal === -1 ? true : false"
:pagination="false"
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
<a-drawer
:visible="addcaseVisible"
class="drawerStyle addcaseDrawer"
width="80%"
title="添加案例"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div v-if="edit" class="headerTitle">编辑案例</div>
<div v-else class="headerTitle">添加案例</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<div class="main_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">案例标题</div>
<div class="fi_input">
<a-input
v-model:value="inputV1"
style="width: 264px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
/>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
<div class="mi_btns">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2" @click="resetCase()">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="main_table">
<a-table class="ant-table-striped" :row-class-name="
(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
" :row-selection="rowSelection" :columns="tableDataFunc()" :data-source="tableData"
:loading="tableDataTotal === -1 ? true : false" expandRowByClick="true" this.getMilitaryDeployment()
@expand="expandTable" :pagination="false" filterMultiple:false
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="handelChangePage"
/>
</div>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
const columns1 = [
{
title: "案例标题",
width: "40%",
dataIndex: "title",
key: "num",
align: "center",
ellipsis: true,
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="updateTask">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import * as api from "../../api/indexInvist.js";
import * as apiTask from "../../api/indexTaskadd";
import { message } from "ant-design-vue";
import { RouterEditTask } from "@/api/indexTask";
import dayjs from "dayjs";
export default {
name: "AddCase",
props: {
addcaseVisible: {
type: Boolean,
default: false,
},
{
title: "作者",
width: "25%",
dataIndex: "name",
key: "name",
align: "center",
EditCaseId: {
type: Number,
default: null,
},
{
title: "导入时间",
width: "35%",
dataIndex: "time",
key: "time",
align: "center",
edit: { // 是否为编辑
type: Boolean,
default: null,
},
];
const rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
projectId: {
type: Number,
default: null,
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
chooseStageId: {
type: Number,
default: null,
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
routerTaskId: {
type: Number,
default: 0,
},
});
export default {
name: "AddCase",
props: {
addcaseVisible: {
type: Boolean,
default: false,
isLevel: { // 是否是关卡页面触发
type: Boolean,
default: null,
},
projectTaskId: { // 要编辑的projectId
type: Number,
default: null,
},
routerId: {
type: Number,
default: null,
},
isactive: {
type: Number,
default: null,
}
},
setup(props, ctx) {
const state = reactive({
tableData: [
{
key: "1",
title: "基于BOE显示PNL工厂的工序平1111112222222221111111111111122222333335555",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
],
currentPage: 1,
tableDataTotal: 0,
pageSize: 10,
inputV1: '',
time: undefined,
assessmentId: null,
assessmentName: "",
});
const closeDrawer = () => {
ctx.emit("update:addcaseVisible", false);
ctx.emit("update:edit", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
const tableDataFunc = () => {
const columns = [
{
title: "案例标题",
dataIndex: "tit",
key: "tit",
width: "400px",
align: "center",
},
{
title: "作者",
dataIndex: "name",
// width: "30%",
key: "name",
width: "100px",
align: "center",
className: "classify",
},
{
title: "导入时间",
dataIndex: "time",
key: "time",
width: "200px",
align: "center",
},
];
return columns;
};
const rowSelection = {
onSelect: (selectedRows, selected, selectedRowKeys) => {
console.log(
"selectedRowKeys", selectedRowKeys, "selectedRows", selectedRows, "selected", selected);
console.log(selectedRows.assessmentId);
state.assessmentId = selectedRows.assessmentId;
state.assessmentName = selectedRows.name;
},
},
setup(props, ctx) {
const state = reactive({
tableData1: [
{
key: "1",
title: "基于BOE显示PNL工厂的工序平1111112222222221111111111111122222333335555",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "2",
title: "OEM 企业一线用工之路探索",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "3",
title: " 销售数字化转型的痛苦与探索",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "4",
title: "疫情突发技能人才招聘的相关",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "5",
title: "设计效率提升之工具化",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "6",
title: "疫情突发技能人才招聘的相关",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "7",
title: "基于BOE显示PNL工厂的工序平",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "8",
title: "基于BOE显示PNL工厂的工序平",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
{
key: "9",
title: "基于BOE显示PNL工厂的工序平",
name: "李玉冰",
time: "2022-10-31 23:12:00",
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
inputV1:'',
};
const handelChangePage = (page, pageSize) => {
state.currentPage = page;
state.pageSize = pageSize;
getAllCaseText();
};
const getTableDate = (tableData) => {
let data = tableData;
let array = [];
data.map((value, index) => {
let obj = {
key: index,
assessmentId: value.assessmentId,
num: value.essayQuestionVoList.length,
name: value.assessmentName ? value.assessmentName : "-",
creator: value.createUser ? value.createUser : "-",
time: dayjs(value.createTime).format("YYYY-MM-DD"),
};
array.push(obj);
});
const closeDrawer = () => {
ctx.emit("update:addcaseVisible", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
columns1,
rowSelection,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
state.tableData = array;
};
//获取全部案例信息接口
const getAllCaseText = () => {
api
.queryAssessmentDetailList({
assessmentName: "",
pageNo: state.currentPage,
pageSize: state.pageSize,
})
.then((res) => {
let arr = res.data.data.rows;
if (res.status === 200) {
// console.log("获取案例信息", res.data.data);
getTableDate(arr);
state.tableDataTotal = Number(res.data.data.total);
}
})
.catch((err) => {
console.log("获取全部在线信息接口失败", err);
// state.createLoading = false;
});
};
const updateTask = () => {
console.log("jinlaile=================", state.assessmentName)
if (props.isLevel) {
RouterEditTask({
chapterId: props.isactive,
courseId: state.assessmentId,
name: state.assessmentName,
routerId: props.routerId,
routerTaskId: props.routerTaskId || 0,
type: 3,
})
.then((res) => {
console.log(res, 11111);
message.success(`${props.edit ? '编辑' : '新增'}关卡任务成功`)
ctx.emit("changeData", false);
closeDrawer();
state.addLoading = false;
})
.catch((err) => {
console.log(err, 1111);
});
} else {
console.log("=========projectTaskId", props.projectTaskId);
apiTask
.addTask({
courseId: state.assessmentId,
name: state.assessmentName,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId,
type: 3,
})
.then((res) => {
console.log("调用项目添加接口后111", res.data, 11111);
ctx.emit("changeData", false);
closeDrawer();
})
.catch((err) => {
console.log(err, 111111);
});
}
}
//重置案例信息
const resetCase = () => {
state.inputV1 = "";
getAllCaseText();
};
onMounted(() => {
// createCase();
getAllCaseText();
});
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
tableDataFunc,
rowSelection,
handelChangePage,
getTableDate,
updateTask,
getAllCaseText,
resetCase,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
@@ -382,4 +472,4 @@
}
}
}
</style>
</style>