mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 20:06:47 +08:00
feat:创建任务弹窗
This commit is contained in:
岳佳鑫
@@ -3,7 +3,7 @@
|
|||||||
<div class="left clearfix">
|
<div class="left clearfix">
|
||||||
<div class="leftmain">
|
<div class="leftmain">
|
||||||
<div class="tit">阶段<img src="../../assets/images/projectadd/right.png" style="margin-left: 10px"/></div>
|
<div class="tit">阶段<img src="../../assets/images/projectadd/right.png" style="margin-left: 10px"/></div>
|
||||||
<div class="btn btn3" style="margin-left: 19px">
|
<div class="btn btn3" @click="showModal" style="margin-left: 19px">
|
||||||
<div class="search"></div>
|
<div class="search"></div>
|
||||||
<div class="btnText">添加阶段</div>
|
<div class="btnText">添加阶段</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -259,6 +259,60 @@
|
|||||||
</a-drawer>
|
</a-drawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="stage"
|
||||||
|
:title="null"
|
||||||
|
@ok="closeModal"
|
||||||
|
:footer="null"
|
||||||
|
:closable="false"
|
||||||
|
wrapClassName="addstage"
|
||||||
|
width="624px"
|
||||||
|
height="388px"
|
||||||
|
>
|
||||||
|
<div class="modalHeader"
|
||||||
|
style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
|
||||||
|
>
|
||||||
|
<div class="headerLeft" style="margin-left: 32px">
|
||||||
|
<span class="headerLeftText" style="font-size: 16px">添加阶段</span>
|
||||||
|
</div>
|
||||||
|
<div style="cursor: pointer;margin-right:32px" @click="closeModal">
|
||||||
|
<img
|
||||||
|
style="width: 22px; height: 22px"
|
||||||
|
src="../../assets/images/basicinfo/close22.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMain"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<div class="name">
|
||||||
|
<div class="namebox">
|
||||||
|
<div class="inname">阶段名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="in">
|
||||||
|
<a-input v-model:value="valueE" show-count :maxlength="20" placeholder="请输入阶段名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name" style="display: flex; align-items: flex-start">
|
||||||
|
<div class="namebox">
|
||||||
|
<div class="inname">阶段说明：</div>
|
||||||
|
</div>
|
||||||
|
<div class="in">
|
||||||
|
<a-textarea v-model:value="value" style="height: 88px" show-count :maxlength="100" placeholder="请输入阶段说明" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;width: 100%;justify-content: center;margin-top: 40px">
|
||||||
|
<button @click="closeModal"
|
||||||
|
style=" cursor: pointer;height: 40px;width: 100px;border: 1px solid #387DF7;border-radius: 4px;color: #387DF7;background-color: #FFFFFF"
|
||||||
|
>取消</button>
|
||||||
|
<button @click="closeModal"
|
||||||
|
style=" cursor: pointer;margin-left: 16px;margin-bottom: 40px;height: 40px;width: 100px;border: 1px solid #388BE1;border-radius: 4px;color: #FFFFFF;background-color: #388BE1"
|
||||||
|
>确定</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -556,6 +610,7 @@ export default {
|
|||||||
tableDataTotal: 100,
|
tableDataTotal: 100,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
visible: false,
|
visible: false,
|
||||||
|
stage: false,
|
||||||
selectedRowKeys: [],
|
selectedRowKeys: [],
|
||||||
});
|
});
|
||||||
const selectProjectName = (value, index) => {
|
const selectProjectName = (value, index) => {
|
||||||
@@ -698,7 +753,12 @@ export default {
|
|||||||
// 40 +
|
// 40 +
|
||||||
// "px";
|
// "px";
|
||||||
// };
|
// };
|
||||||
|
const showModal = () => {
|
||||||
|
state.stage = true;
|
||||||
|
};
|
||||||
|
const closeModal = () => {
|
||||||
|
state.stage = false;
|
||||||
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
document.getElementsByTagName("main")[0].style.background =
|
document.getElementsByTagName("main")[0].style.background =
|
||||||
"rgb(245, 247, 250,1)";
|
"rgb(245, 247, 250,1)";
|
||||||
@@ -714,6 +774,8 @@ export default {
|
|||||||
selectProjectName,
|
selectProjectName,
|
||||||
selectProjectName2,
|
selectProjectName2,
|
||||||
tableDataFunc,
|
tableDataFunc,
|
||||||
|
showModal,
|
||||||
|
closeModal,
|
||||||
showDrawer,
|
showDrawer,
|
||||||
afterVisibleChange,
|
afterVisibleChange,
|
||||||
drawercolumns,
|
drawercolumns,
|
||||||
@@ -724,13 +786,128 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.clearfix:after,
|
|
||||||
.clearfix:before {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.ant-input {
|
||||||
|
border-radius: 8px;
|
||||||
|
// height: 120%;
|
||||||
|
width: 384px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.addstage {
|
||||||
|
.ant-modal {
|
||||||
|
.ant-modal-body {
|
||||||
|
padding: 0 !important;
|
||||||
|
.modalMain {
|
||||||
|
|
||||||
|
.ant-input-textarea-show-count {
|
||||||
|
position: relative;
|
||||||
|
height: 88px;
|
||||||
|
}
|
||||||
|
.ant-input-textarea-show-count::after {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
width: 78%;
|
||||||
|
// background-color: lightcoral;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 30px;
|
||||||
|
// align-items: center;
|
||||||
|
// height: 40px;
|
||||||
|
// border: 1px solid black;
|
||||||
|
|
||||||
|
.inname {
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 26px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.in {
|
||||||
|
margin-left: 14px;
|
||||||
|
width: 81%;
|
||||||
|
position: relative;
|
||||||
|
.ant-input {
|
||||||
|
border-radius: 5px;
|
||||||
|
// height: 120%;
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
width: 78%;
|
||||||
|
// background-color: lightcoral;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
align-items: center;
|
||||||
|
//height: 40px;
|
||||||
|
// border: 1px solid black;
|
||||||
|
.namebox {
|
||||||
|
width: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.nameimg {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 25px;
|
||||||
|
color: #ff4e4e;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
position: relative;
|
||||||
|
margin-left: 14px;
|
||||||
|
.box1 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 50px;
|
||||||
|
margin-left: -25px;
|
||||||
|
margin-top: -5px;
|
||||||
|
border-top: 2px solid rgba(78, 166, 255, 1);
|
||||||
|
}
|
||||||
|
.box2 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
height: 50px;
|
||||||
|
//margin-left: -5px;
|
||||||
|
margin-top: -25px;
|
||||||
|
border-left: 2px solid rgba(78, 166, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inname {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
.in {
|
||||||
|
margin-left: 14px;
|
||||||
|
flex: 1;
|
||||||
|
.ant-radio-wrapper {
|
||||||
|
}
|
||||||
|
.ant-input-affix-wrapper {
|
||||||
|
width: 384px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.ant-input {
|
||||||
|
border-radius: 8px;
|
||||||
|
// height: 120%;
|
||||||
|
//width: 384px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.drawerStyle {
|
.drawerStyle {
|
||||||
.ant-drawer-content-wrapper {
|
.ant-drawer-content-wrapper {
|
||||||
// max-width: 1000px;
|
// max-width: 1000px;
|
||||||
@@ -1320,4 +1497,4 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user