Files
fe-manage/src/components/drawers/AddInvist.vue

365 lines
9.3 KiB
Vue

<template>
<a-drawer
:visible="addinvistVisible"
class="drawerStyle addinvistDrawer"
width="70%"
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_left">
<div class="main_item">
<div class="fi_input">
<a-input
v-model:value="inputV1"
style="width: 424px; height: 40px"
placeholder="请输入评估名称"
maxlength="20"
/>
</div>
<div class="btns">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btnsn">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
<div class="main_item2">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
/>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="createInvist">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs} from "vue";
import * as api from "../../api/indexInvist";
import * as apitaskadd from "../../api/indexTaskadd";
import { message } from "ant-design-vue";
export default {
name: "AddInvist",
// components: {
// },
props: {
addinvistVisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
time: undefined,
tableData: [
{
key: 1,
name: "评估",
num: "2",
creator: "管理员",
time: "2022-07-21 14:30:25",
},
{
key: 2,
name: "评估",
num: "8",
creator: "管理员",
time: "2022-07-21 14:30:25",
},
{
key: 3,
name: "评估",
num: "5",
creator: "管理员",
time: "2022-07-21 14:30:25",
},
{
key: 4,
name: "评估",
num: "20",
creator: "管理员",
time: "2022-07-21 14:30:25",
},
],
});
const closeDrawer = () => {
ctx.emit("update:addinvistVisible", false);
state.inputV1 = "";
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
const tableDataFunc = () => {
const columns = [
{
title: "名称",
dataIndex: "name",
// width: "30%",
key: "name",
width: '150px',
align: "left",
className: "classify",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
// console.log(text.record.checked1);
return (
<div class="racona">
<span> {text.record.name}</span>
{/**
<div class="img"></div>
<a-checkbox class="ch" checked={text.record.checkedd}>
{text.record.lei}
</a-checkbox>
*/}
</div>
);
},
},
{
title: "题数",
dataIndex: "num",
key: "num",
width: '80px',
align: "center",
},
{
title: "创建人",
dataIndex: "creator",
key: "creator",
width: '150px',
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: '200px',
align: "center",
},
];
return columns;
};
//创建评估信息
const createInvist = () => {
let obj = {
appraiseName: state.inputV1,
appraiseEndTime: "",
appraiseExplain: "",
appraiseFlag: "",
appraiseId: 0,
appraiseStartTime: "",
appraiseTag: "",
createTime: "",
createUser: 0,
researchId: 0,
researchName: "",
updateTime: "",
updateUser: 0,
};
api
.createAppraiseMessage(obj)
.then((res) => {
setTimeout(() => {
console.log("创建成功", res);
message.success("创建成功");
closeDrawer();
apitaskadd.addTask({
courseId: 0,
duration: 0,
flag: true,
name: "",
projectId: 28,
projectTaskId: 0,
stageId: 3,
type: 11,
});
}, 1000);
})
.catch((err) => {
console.log("创建失败", err);
// state.createLoading = false;
});
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
tableDataFunc,
createInvist,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addinvistDrawer {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
display: flex;
justify-content: space-between;
.main_left {
padding-right: 30px;
.main_item {
display: flex;
align-items: center;
margin-bottom: 32px;
.fi_input{
margin-right: 20px;
}
.btns{
margin-right: 20px;
padding: 0px 26px 0px 26px;
height: 38px;
background: #409eff;
border-radius: 8px;
//border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btnsn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #409eff;
line-height: 36px;
margin-left: 5px;
}
}
}
.main_item2 {
.pa {
width: 100%;
margin:15px auto;
display: flex;
justify-content: center;
}
}
}
}
.main_btns {
height: 72px;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>