Browse Source

创建任务 页面优化

master
DX 4 weeks ago
parent
commit
2f611229ed
  1. 115
      src/views/task/create copy.vue
  2. 2
      src/views/task/createEnterprise.vue

115
src/views/task/create copy.vue

@ -1,9 +1,11 @@
<template>
<ContentWrap title="基本信息">
<ContentWrap>
<section class="taskForm">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto">
<div class="title">基本信息</div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" class="formClass">
<el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入任务标题" />
<el-input v-model="formData.title" placeholder="请输入任务标题" size="large" />
</el-form-item>
<el-form-item label="时间周期" prop="planTime">
<el-date-picker
@ -11,11 +13,22 @@
type="daterange"
format="YYYY年MM月DD日"
range-separator="至"
size="large"
start-placeholder="选择任务计划开始时间"
end-placeholder="选择任务计划结束时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="描述" prop="description" style="width: 100%; padding: 0; margin-top: 0px;" class="descClass">
<el-input
type="textarea"
v-model="formData.description"
:autosize="{
minRows: 4
}"
placeholder="请输入描述"
/>
</el-form-item>
<el-form-item label="类型" prop="taskType">
<el-tree-select
v-model="formData.taskType"
@ -23,6 +36,7 @@
:props="defaultProps"
check-strictly
node-key="id"
size="large"
placeholder="请选择任务类型"
/>
</el-form-item>
@ -37,7 +51,7 @@
</el-select>
</el-form-item>
<el-form-item label="优先级" prop="priority">
<el-select v-model="formData.priority" placeholder="请选择任务优先级">
<el-select v-model="formData.priority" placeholder="请选择任务优先级" size="large">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.TASK_PRIORITY)"
:key="dict.value"
@ -46,36 +60,11 @@
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="标签" prop="tags" style="width: 100%">-->
<!-- <el-tree-select-->
<!-- v-model="formData.tags"-->
<!-- :data="tagList"-->
<!-- check-strictly-->
<!-- :render-after-expand="false"-->
<!-- placeholder="请选择标签"-->
<!-- node-key="id"-->
<!-- show-checkbox-->
<!-- multiple-->
<!-- :props="{-->
<!-- label: 'tagName'-->
<!-- }"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="描述" prop="description" style="width: 100%">
<el-input
type="textarea"
v-model="formData.description"
:autosize="{
minRows: 3
}"
placeholder="请输入描述"
/>
</el-form-item>
</el-form>
</section>
</ContentWrap>
<ContentWrap title="执行范围">
<!-- <template #header> </template> -->
<ContentWrap>
<div class="title">执行范围</div>
<section class="select-area" v-loading="loading">
<section>
<el-form
@ -83,6 +72,7 @@
ref="queryFormRef"
:inline="true"
label-width="0"
size="large"
class="search-form"
>
<div class="form-container">
@ -572,27 +562,46 @@ onMounted(() => {
})
</script>
<style scoped lang="scss">
::v-deep(.el-card__header) {
border-bottom: 0;
}
::v-deep(.taskForm .el-form) {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
gap: 10px;
.el-form-item {
width: calc(50% - 10px);
display: flex;
align-items: flex-start;
.title {
font-size: 16px;
font-weight: bold;
margin: 20px;
font-size: 17px;
}
}
.taskForm{
padding-right: 20px;
.formClass {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
align-items: center;
gap: 20px;
width: 100%;
.descClass {
grid-row: span 2;
}
::v-deep(.el-form-item) {
width: 100%;
align-items: flex-start;
}
}
}
.enterprise-area {
flex: 1;
gap: 10px;
margin: 0 20px; //
overflow-x: hidden; //
width: calc(100% - 40px); //
width: calc(100% - 40px); // q
::v-deep(.el-table) {
width: 100% !important; //
.el-table__cell {
@ -669,7 +678,7 @@ onMounted(() => {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: minmax(0, 1fr);
grid-gap: 20px;
align-items: center;
::v-deep(.select-area .el-form) {
margin-bottom: 15px;
.el-form-item {
@ -686,9 +695,7 @@ onMounted(() => {
}
.search-form {
background-color: #fff;
padding: 20px 20px 0px 20px;
border-radius: 4px;
position: relative;
margin: 0 20px; // margin
.form-container {
display: grid;
@ -707,9 +714,15 @@ onMounted(() => {
}
}
.action-buttons {
position: absolute;
right: 10px;
bottom: 0px;
display: flex;
justify-content: flex-end; /* 水平右对齐 */
align-items: center;
width: 100%;
button{
margin-left: auto;
margin-top: auto;
}
}
.button-container {

2
src/views/task/createEnterprise.vue

@ -9,7 +9,7 @@
<div class="enterprise-container">
<!-- 搜索区域 -->
<div class="search-area">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="0" class="search-form">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="0" size="large" class="search-form">
<div class="form-container">
<el-form-item label="" prop="region" class="form-item">

Loading…
Cancel
Save