mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-08 10:26:44 +08:00
feat:创建任务弹窗
This commit is contained in:
岳佳鑫
@@ -3,7 +3,7 @@
|
||||
<div class="left clearfix">
|
||||
<div class="leftmain">
|
||||
<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="btnText">添加阶段</div>
|
||||
</div>
|
||||
@@ -259,6 +259,60 @@
|
||||
</a-drawer>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@@ -556,6 +610,7 @@ export default {
|
||||
tableDataTotal: 100,
|
||||
pageSize: 10,
|
||||
visible: false,
|
||||
stage: false,
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
const selectProjectName = (value, index) => {
|
||||
@@ -698,7 +753,12 @@ export default {
|
||||
// 40 +
|
||||
// "px";
|
||||
// };
|
||||
|
||||
const showModal = () => {
|
||||
state.stage = true;
|
||||
};
|
||||
const closeModal = () => {
|
||||
state.stage = false;
|
||||
};
|
||||
onMounted(() => {
|
||||
document.getElementsByTagName("main")[0].style.background =
|
||||
"rgb(245, 247, 250,1)";
|
||||
@@ -714,6 +774,8 @@ export default {
|
||||
selectProjectName,
|
||||
selectProjectName2,
|
||||
tableDataFunc,
|
||||
showModal,
|
||||
closeModal,
|
||||
showDrawer,
|
||||
afterVisibleChange,
|
||||
drawercolumns,
|
||||
@@ -724,13 +786,128 @@ export default {
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
.ant-drawer-content-wrapper {
|
||||
// max-width: 1000px;
|
||||
@@ -1320,4 +1497,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user