mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-18 23:36:46 +08:00
feat:增加项目列表页面查询、创建多层子项目数据整合、创建单层子项目、创建多层项目数据整合。
This commit is contained in:
wuyx
@@ -5,28 +5,31 @@
|
||||
<div class="filter">
|
||||
<div class="filterItems">
|
||||
<div class="select">
|
||||
<a-select v-model:value="projectName" style="width: 270px" placeholder="请输入项目名称" :options="projectNameList"
|
||||
@change="selectProjectName" allowClear showSearch></a-select>
|
||||
<a-input v-model:value="sProjectName" style="width: 270px; height: 40px; border-radius: 8px;"
|
||||
placeholder="请输入项目名称" @change="sProjectNameChange" allowClear showSearch>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select v-model:value="projectName" style="width: 270px" placeholder="请输入项目经理" :options="projectNameList"
|
||||
@change="selectProjectName" allowClear showSearch></a-select>
|
||||
<a-input v-model:value="sProjectOrder" style="width: 270px; height: 40px; border-radius: 8px;"
|
||||
placeholder="请输入项目经理" @change="sProjectOrderChange" allowClear showSearch>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select v-model:value="projectName" style="width: 270px" placeholder="请选择状态" :options="projectNameList"
|
||||
@change="selectProjectName" allowClear showSearch></a-select>
|
||||
<a-select v-model:value="sProjectState" style="width: 270px" placeholder="请选择状态" :options="sProjectStateList"
|
||||
@change="sProjectStateChange" allowClear showSearch></a-select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-date-picker v-model="selectTime" type="date" placeholder="创建时间" style="width: 270px" />
|
||||
<a-date-picker v-model:value="sProjectTime" @change="sProjectTimeChange" type="date" placeholder="创建时间"
|
||||
style="width: 270px" />
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
<div class="btnText" v-on:click="searchSubmit">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
<div class="btnText" v-on:click="searchReset">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,7 +106,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modalMain">
|
||||
<router-link to="/sonproject" class="taskbox" style="
|
||||
<div @click="createChildProject" class="taskbox" style="
|
||||
margin-right: 24px;
|
||||
background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
|
||||
">
|
||||
@@ -119,7 +122,7 @@
|
||||
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">
|
||||
单层子项目
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="taskbox" @click="showModal3" style="
|
||||
background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
|
||||
">
|
||||
@@ -240,7 +243,7 @@
|
||||
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
</div>
|
||||
<div class="inname">分类:</div>
|
||||
<div class="in">
|
||||
<div class="in select">
|
||||
<a-select v-model:value="value2" placeholder="四个养成" :options="classifyList" @change="classificationChange"
|
||||
style="border-radius: 8px; height: 40px" />
|
||||
</div>
|
||||
@@ -251,7 +254,7 @@
|
||||
</div>
|
||||
<div class="inname">项目经理:</div>
|
||||
<div class="in">
|
||||
<a-select v-model:value="value3" placeholder="请选择项目经理" :options="classifyList1"
|
||||
<a-select v-model:value="value3" mode="multiple" placeholder="请选择项目经理" :options="classifyList1"
|
||||
@change="classificationChange1" style="border-radius: 8px; height: 40px" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -260,8 +263,9 @@
|
||||
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
</div>
|
||||
<div class="inname">资源归属:</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="value5" style="border-radius: 8px; height: 40px" />
|
||||
<div class="in select">
|
||||
<a-select v-model:value="value5" placeholder="请选择资源归属" :options="classifyList5"
|
||||
@change="classificationChange5" style="border-radius: 8px; height: 40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pubtn">
|
||||
@@ -293,7 +297,7 @@
|
||||
<div class="modalMain">
|
||||
<div style="margin-left: 40px; margin-top: 40px">
|
||||
<span style="color: #000000; font-size: 14px">项目归属：</span>
|
||||
<span style="color: #999999; font-size: 14px; margin-left: 10px">管理者进阶</span>
|
||||
<span style="color: #999999; font-size: 14px; margin-left: 10px">{{ currentProjectName }}</span>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="star" style="margin-top: -4px">
|
||||
@@ -301,7 +305,7 @@
|
||||
</div>
|
||||
<div class="inname">子项目名称:</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="value5" placeholder="请输入项目名称" style="border-radius: 8px; height: 40px" />
|
||||
<a-input v-model:value="value6" placeholder="请输入项目名称" style="border-radius: 8px; height: 40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
@@ -309,8 +313,9 @@
|
||||
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
</div>
|
||||
<div class="inname">分类:</div>
|
||||
<div class="in">
|
||||
<a-select v-model:value="value6" placeholder="四个养成" style="border-radius: 8px; height: 40px" />
|
||||
<div class="in select">
|
||||
<a-select v-model:value="value7" @change="classificationChange2" :options="classifyList2"
|
||||
placeholder="四个养成" style="border-radius: 8px; height: 40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
@@ -319,7 +324,8 @@
|
||||
</div>
|
||||
<div class="inname">子项目经理:</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="value7" placeholder="自动带出 可编辑" style="border-radius: 8px; height: 40px" />
|
||||
<a-select v-model:value="value8" mode="multiple" @change="classificationChange3" :options="classifyList3"
|
||||
placeholder="自动带出 可编辑" style="border-radius: 8px; height: 40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
@@ -327,13 +333,14 @@
|
||||
<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
</div>
|
||||
<div class="inname">资源归属:</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="value8" style="border-radius: 8px; height: 40px" />
|
||||
<div class="in select">
|
||||
<a-select v-model:value="value9" @change="classificationChange4" :options="classifyList4"
|
||||
placeholder="请选择资源归属" style="border-radius: 8px; height: 40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pubtn">
|
||||
<a-button class="pubtn1" @click="closeModal3">取消</a-button>
|
||||
<a-button class="pubtn2" @click="closeModal3">确定</a-button>
|
||||
<a-button class="pubtn2" @click="createChildsProject">确定</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
@@ -478,6 +485,7 @@
|
||||
<script>
|
||||
import { reactive, toRefs, onMounted, ref } from "vue";
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useRouter } from "vue-router";
|
||||
import ProjOwnerShip from "../../components/drawers/ProjectOwn";
|
||||
import ProjPowerList from "../../components/drawers/ProjPowerList";
|
||||
import ProjCheckShip from "../../components/drawers/ProjCheckPower";
|
||||
@@ -535,8 +543,95 @@ export default {
|
||||
ProjPvisible: false,
|
||||
ProjCheckvisible: false,
|
||||
ProjManagevisible: false,
|
||||
|
||||
currentProjectId: '',
|
||||
currentProjectName: '',
|
||||
|
||||
});
|
||||
// 数据接入 - start -
|
||||
const router = useRouter();
|
||||
// 搜索数据
|
||||
const sProjectName = ref('');
|
||||
const sProjectOrder = ref('');
|
||||
const sProjectState = ref('');
|
||||
const sProjectTime = ref('');
|
||||
|
||||
const sProjectStateList = ref([
|
||||
{ value: 0, label: '草稿' },
|
||||
{ value: 1, label: '进行中' },
|
||||
{ value: 2, label: '未开始' },
|
||||
{ value: 3, label: '已结束' },
|
||||
]);
|
||||
|
||||
let name = '';
|
||||
const sProjectNameChange = (key) => {
|
||||
console.log('项目名称', key.target.value)
|
||||
name = key.target.value
|
||||
}
|
||||
let managerid = '';
|
||||
const sProjectOrderChange = (key) => {
|
||||
console.log('项目经理', key.target.value)
|
||||
managerid = key.target.value;
|
||||
}
|
||||
let status = '';
|
||||
const sProjectStateChange = (key) => {
|
||||
console.log('项目状态', key)
|
||||
status = key;
|
||||
}
|
||||
|
||||
let beginTime = '';
|
||||
let endTime = '';
|
||||
const sProjectTimeChange = (key, value) => {
|
||||
console.log('项目时间', key)
|
||||
console.log('项目时间', value)
|
||||
console.log(new Date('2019-10-08 18:22:37').getTime())
|
||||
beginTime = Math.ceil(new Date(value + ' ' + '00:00:00').getTime() / 1000);
|
||||
endTime = Math.ceil(new Date(value + ' ' + '23:59:59').getTime() / 1000);
|
||||
}
|
||||
|
||||
const searchReset = () => {
|
||||
sProjectName.value = "";
|
||||
sProjectOrder.value = "";
|
||||
sProjectState.value = null;
|
||||
sProjectTime.value = null;
|
||||
name = "";
|
||||
beginTime = "";
|
||||
endTime = "";
|
||||
status = null;
|
||||
managerid = "";
|
||||
getTableDate();
|
||||
}
|
||||
|
||||
const searchSubmit = () => {
|
||||
const obj = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
beginTime: beginTime,
|
||||
endTime: endTime,
|
||||
status: status,
|
||||
name: name,
|
||||
manager: managerid
|
||||
}
|
||||
let searchList = [];
|
||||
for (let i in obj) {
|
||||
if (obj[i] !== "") {
|
||||
if (obj[i] !== null) {
|
||||
searchList.push(1);
|
||||
} else {
|
||||
searchList.push(0);
|
||||
}
|
||||
} else {
|
||||
searchList.push(0);
|
||||
}
|
||||
}
|
||||
if (searchList.toString().indexOf("1") == -1) {
|
||||
message.destroy();
|
||||
message.warning("请输入搜索条件后进行搜索");
|
||||
}
|
||||
console.log('搜索的数据筛选条件', obj, searchList.toString())
|
||||
|
||||
getTableDate(obj);
|
||||
}
|
||||
|
||||
// 项目分类
|
||||
const classifyList = ref([
|
||||
@@ -552,10 +647,22 @@ export default {
|
||||
]);
|
||||
|
||||
const value1 = ref("");
|
||||
const value2 = ref("");
|
||||
const value3 = ref("");
|
||||
const value2 = ref([]);
|
||||
const value3 = ref([]);
|
||||
const value4 = ref("");
|
||||
const value5 = ref("");
|
||||
const value5 = ref([]);
|
||||
|
||||
const classifyList5 = ref([
|
||||
{ value: 1, label: '项目一' },
|
||||
{ value: 2, label: '项目二' },
|
||||
{ value: 3, label: '项目三' },
|
||||
]);
|
||||
|
||||
let sourceBelongId = '';
|
||||
const classificationChange5 = (key) => {
|
||||
console.log(`selected ${key}`);
|
||||
sourceBelongId = key;
|
||||
}
|
||||
|
||||
let type = "";
|
||||
const classificationChange = (key) => {
|
||||
@@ -568,10 +675,21 @@ export default {
|
||||
let managerId = "";
|
||||
|
||||
const classificationChange1 = (key) => {
|
||||
console.log(`selected ${key}`);
|
||||
console.log(classifyList1.value[key - 1].label);
|
||||
manager = classifyList1.value[key - 1].label;
|
||||
managerId = key;
|
||||
console.log(`selected ${key}`, classifyList1);
|
||||
let mstr = '';
|
||||
let midstr = '';
|
||||
for (let i = 0; i < key.length; i++) {
|
||||
if (key.length - 1 !== i) {
|
||||
midstr += key[i] + ',';
|
||||
mstr += classifyList1.value[i].label + ',';
|
||||
} else {
|
||||
midstr += key[i];
|
||||
mstr += classifyList1.value[i].label;
|
||||
}
|
||||
}
|
||||
console.log(mstr, midstr)
|
||||
manager = mstr;
|
||||
managerId = midstr;
|
||||
};
|
||||
|
||||
// 创建多层项目
|
||||
@@ -590,7 +708,7 @@ export default {
|
||||
category: type,
|
||||
manager: manager,
|
||||
managerId: managerId,
|
||||
sourceBelongId: 2,
|
||||
sourceBelongId: sourceBelongId,
|
||||
};
|
||||
console.log('创建多层项目提交的数据格式', obj);
|
||||
for (let i in errorMsgs) {
|
||||
@@ -606,12 +724,153 @@ export default {
|
||||
console.log(res)
|
||||
if (res.status == 200 && res.data.code == 200) {
|
||||
// 创建成功 隐藏弹出框
|
||||
value1.value = "";
|
||||
type = "";
|
||||
manager = "";
|
||||
managerId = "";
|
||||
sourceBelongId = "";
|
||||
value2.value = [];
|
||||
value3.value = [];
|
||||
value4.value = "";
|
||||
value5.value = [];
|
||||
state.doublepro = false;
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
};
|
||||
// 取消按钮 清空输入的数据
|
||||
const closeModal2 = () => {
|
||||
value1.value = "";
|
||||
type = "";
|
||||
manager = "";
|
||||
managerId = "";
|
||||
sourceBelongId = "";
|
||||
value2.value = [];
|
||||
value3.value = [];
|
||||
value4.value = "";
|
||||
value5.value = [];
|
||||
state.doublepro = false;
|
||||
};
|
||||
|
||||
// 创建单层子项目 (需要传入多层项目的ProjectID)
|
||||
const createChildProject = () => {
|
||||
console.log(state.currentProjectId)
|
||||
router.push({
|
||||
path: '/sonproject',
|
||||
query: { projectId: state.currentProjectId, name: state.currentProjectName }
|
||||
});
|
||||
}
|
||||
|
||||
// 创建多层子项目
|
||||
const value6 = ref("");
|
||||
const value7 = ref([]);
|
||||
const value8 = ref([]);
|
||||
const value9 = ref([]);
|
||||
|
||||
const classifyList2 = ref([
|
||||
{ value: 1, label: '管理者' },
|
||||
{ value: 2, label: '领军者' },
|
||||
{ value: 3, label: '产业人' },
|
||||
]);
|
||||
|
||||
let categoryT = '';
|
||||
const classificationChange2 = (key) => {
|
||||
console.log(`selected ${key}`);
|
||||
categoryT = key;
|
||||
};
|
||||
|
||||
const classifyList3 = ref([
|
||||
{ value: 1, label: '李俊国' },
|
||||
{ value: 2, label: '将小米' },
|
||||
{ value: 3, label: '刘孟君' },
|
||||
]);
|
||||
|
||||
let managerT = '';
|
||||
let managerIdT = '';
|
||||
const classificationChange3 = (key) => {
|
||||
console.log(`selected ${key}`);
|
||||
console.log(`selected ${key}`, classifyList3);
|
||||
let mstr = '';
|
||||
let midstr = '';
|
||||
for (let i = 0; i < key.length; i++) {
|
||||
if (key.length - 1 !== i) {
|
||||
midstr += key[i] + ',';
|
||||
mstr += classifyList3.value[i].label + ',';
|
||||
} else {
|
||||
midstr += key[i];
|
||||
mstr += classifyList3.value[i].label;
|
||||
}
|
||||
}
|
||||
console.log(mstr, midstr)
|
||||
managerT = mstr;
|
||||
managerIdT = midstr;
|
||||
};
|
||||
|
||||
const classifyList4 = ref([
|
||||
{ value: 1, label: '项目一' },
|
||||
{ value: 2, label: '项目二' },
|
||||
{ value: 3, label: '项目三' },
|
||||
]);
|
||||
|
||||
let sourceBelongIdT = '';
|
||||
const classificationChange4 = (key) => {
|
||||
console.log(`selected ${key}`);
|
||||
sourceBelongIdT = key;
|
||||
};
|
||||
|
||||
// 取消按钮 清空数据
|
||||
const closeModal3 = () => {
|
||||
value6.value = "";
|
||||
categoryT = "";
|
||||
managerT = "";
|
||||
managerIdT = "";
|
||||
sourceBelongIdT = "";
|
||||
value7.value = [];
|
||||
value8.value = [];
|
||||
value9.value = [];
|
||||
state.doublesonpro = false;
|
||||
};
|
||||
|
||||
const createChildsProject = () => {
|
||||
|
||||
const errorMsgs = {
|
||||
"name": "请输入子项目名称",
|
||||
"category": "请选择子项目分类",
|
||||
"manager": "请选择子项目经理",
|
||||
"sourceBelongId": "请选择资源归属"
|
||||
}
|
||||
|
||||
let obj = {
|
||||
name: value6.value,
|
||||
type: 2,
|
||||
category: categoryT,
|
||||
manager: managerT,
|
||||
managerId: managerIdT,
|
||||
sourceBelongId: sourceBelongIdT,
|
||||
};
|
||||
|
||||
console.log('创建多层子项目提交的数据格式', obj);
|
||||
for (let i in errorMsgs) {
|
||||
console.log(obj[i])
|
||||
if (obj[i] === "" || obj[i] === undefined) {
|
||||
message.destroy()
|
||||
message.warning(errorMsgs[i])
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
value6.value = "";
|
||||
categoryT = "";
|
||||
managerT = "";
|
||||
managerIdT = "";
|
||||
sourceBelongIdT = "";
|
||||
value7.value = [];
|
||||
value8.value = [];
|
||||
value9.value = [];
|
||||
state.doublesonpro = false;
|
||||
}
|
||||
|
||||
|
||||
// 数据接入 - end -
|
||||
|
||||
@@ -660,6 +919,20 @@ export default {
|
||||
key: "status",
|
||||
width: 100,
|
||||
align: "center",
|
||||
customRender: (value) => {
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
value.record.status == 0 ?
|
||||
"草稿" :
|
||||
value.record.status == 1 ?
|
||||
"进行中" :
|
||||
value.record.status == 2 ?
|
||||
"未开始" : "已结束"
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
@@ -745,6 +1018,8 @@ export default {
|
||||
class="operation3"
|
||||
style="cursor: pointer"
|
||||
onClick={() => {
|
||||
state.currentProjectId = value.record.projectId;
|
||||
state.currentProjectName = value.record.name;
|
||||
state.sonproject = true;
|
||||
}}
|
||||
>
|
||||
@@ -2892,17 +3167,12 @@ export default {
|
||||
state.doublepro = true;
|
||||
state.estabish = false;
|
||||
};
|
||||
const closeModal2 = () => {
|
||||
state.doublepro = false;
|
||||
};
|
||||
|
||||
|
||||
const showModal3 = () => {
|
||||
state.doublesonpro = true;
|
||||
state.sonproject = false;
|
||||
};
|
||||
const closeModal3 = () => {
|
||||
state.doublesonpro = false;
|
||||
};
|
||||
const showCopyModal = () => {
|
||||
state.copyModal = true;
|
||||
};
|
||||
@@ -2981,14 +3251,40 @@ export default {
|
||||
createStoreyProject,
|
||||
classifyList,
|
||||
classifyList1,
|
||||
classifyList2,
|
||||
classifyList3,
|
||||
classifyList4,
|
||||
classifyList5,
|
||||
classificationChange,
|
||||
classificationChange1,
|
||||
classificationChange2,
|
||||
classificationChange3,
|
||||
classificationChange4,
|
||||
classificationChange5,
|
||||
changePagination,
|
||||
value1,
|
||||
value2,
|
||||
value3,
|
||||
value4,
|
||||
value5,
|
||||
value6,
|
||||
value7,
|
||||
value8,
|
||||
value9,
|
||||
|
||||
sProjectName,
|
||||
sProjectOrder,
|
||||
sProjectState,
|
||||
sProjectTime,
|
||||
sProjectStateList,
|
||||
sProjectNameChange,
|
||||
sProjectOrderChange,
|
||||
sProjectStateChange,
|
||||
sProjectTimeChange,
|
||||
searchReset,
|
||||
searchSubmit,
|
||||
createChildProject,
|
||||
createChildsProject
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@@ -4,124 +4,115 @@
|
||||
<div class="header">
|
||||
<span class="title">创建/编辑单层子项目</span>
|
||||
<router-link to="/projectmanage" class="goback">
|
||||
<span class="return"></span
|
||||
><span class="returntext">返回</span></router-link
|
||||
>
|
||||
<span class="return"></span><span class="returntext">返回</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="main">
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">项目归属</div>
|
||||
</div>
|
||||
<div class="in">
|
||||
<div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0</div>
|
||||
<div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">{{ projectAscription }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">子项目名称</div>
|
||||
</div>
|
||||
<div class="in">
|
||||
<div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0-band</div>
|
||||
<a-input v-model:value="projectName" placeholder="请输入子项目名称" show-count :maxlength="30" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">分类</div>
|
||||
</div>
|
||||
<div class="in select">
|
||||
<a-select
|
||||
:value="classifySelect"
|
||||
placeholder="四个养成"
|
||||
style="width: 100%"
|
||||
:options="classifyList"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
<a-select :getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
" v-model:value="classifySelect" placeholder="四个养成" style="width: 100%" :options="classifyList"
|
||||
@change="classificationChange" allowClear showSearch>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">封面图</div>
|
||||
</div>
|
||||
<div
|
||||
class="box"
|
||||
style="
|
||||
<div class="box" style="
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid rgba(78, 166, 255, 1);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
">
|
||||
<a-upload v-model:file-list="fileList" name="file" list-type="picture-card" class="avatar-uploader"
|
||||
:show-upload-list="false" action="/api/file/upload" :before-upload="beforeUpload" @change="handleChange">
|
||||
<img style="
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 4px;
|
||||
margin-right: 4px;
|
||||
" v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
||||
<div v-else>
|
||||
<!-- <loading-outlined v-if="loading"></loading-outlined> -->
|
||||
<!-- <plus-outlined v-else></plus-outlined> -->
|
||||
<div class="box1"></div>
|
||||
<div class="box2"></div>
|
||||
<!-- <div class="ant-upload-text"></div> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<div class="inname">项目时间</div>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">子项目时间</div>
|
||||
</div>
|
||||
|
||||
<div class="in">
|
||||
<a-range-picker
|
||||
separator="至"
|
||||
style="width: 100%; height: 40px; border-radius: 5px"
|
||||
show-time
|
||||
/>
|
||||
<a-range-picker separator="至" :placeholder="[' 开始时间', ' 结束时间']"
|
||||
style="width: 100%; height: 40px; border-radius: 5px" show-time @change="onRangeChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<div class="inname">项目经理</div>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">子项目经理</div>
|
||||
</div>
|
||||
<div class="in select">
|
||||
<a-select
|
||||
:value="classifySelect"
|
||||
placeholder="请选择项目经理"
|
||||
style="width: 100%"
|
||||
:options="classifyList"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
<div class="in">
|
||||
<a-select :getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
" :value="classifySelect1" mode="multiple" placeholder="请选择子项目经理" style="width: 100%" :options="classifyList1"
|
||||
@change="classificationChange1" allowClear showSearch>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">资源归属</div>
|
||||
</div>
|
||||
|
||||
<div class="in">
|
||||
<a-input v-model:value="valueE" placeholder="自动带出 可修改" />
|
||||
<div class="in select">
|
||||
<a-select :getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
" v-model:value="classifySelect2" placeholder="自动带出 可修改" :options="classifyList2"
|
||||
@change="classificationChange2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name name2">
|
||||
@@ -129,12 +120,7 @@
|
||||
<div class="inname" style="margin-top: 13px">项目说明</div>
|
||||
</div>
|
||||
<div class="in">
|
||||
<a-textarea
|
||||
v-model:value="valuei"
|
||||
style="height: 80px"
|
||||
placeholder="请输入项目说明"
|
||||
show-count :maxlength="200"
|
||||
/>
|
||||
<a-textarea v-model:value="remark" style="height: 80px" placeholder="请输入说明" show-count :maxlength="200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name name2">
|
||||
@@ -142,84 +128,70 @@
|
||||
<div class="inname">同步学习记录</div>
|
||||
</div>
|
||||
<div class="in">
|
||||
<a-radio v-model:checked="checked"
|
||||
><span
|
||||
style="
|
||||
<a-radio @click="changeChecked" v-model:checked="checked"><span style="
|
||||
width: 100%;
|
||||
color: rgba(109, 117, 132, 1);
|
||||
font-size: 14px;
|
||||
"
|
||||
>同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
|
||||
></a-radio
|
||||
>
|
||||
">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">项目级别</div>
|
||||
</div>
|
||||
<div class="in">
|
||||
<a-input
|
||||
v-model:value="valueE"
|
||||
placeholder="集团级/组织级/现地级/部门级"
|
||||
/>
|
||||
<div class="in select">
|
||||
<a-select :getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
" v-model:value="classifySelect3" :options="classifyList3" @change="classificationChange3"
|
||||
placeholder="集团级/组织级/现地级/部门级" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">培训体系</div>
|
||||
</div>
|
||||
<div class="in">
|
||||
<a-input
|
||||
v-model:value="valueE"
|
||||
placeholder="集团级/组织级/现地级/部门级"
|
||||
/>
|
||||
<div class="in select">
|
||||
<a-select :getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
" v-model:value="classifySelect4" :options="classifyList4" @change="classificationChange4"
|
||||
placeholder="集团级/组织级/现地级/部门级" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="namebox">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">是否BOEU实施</div>
|
||||
</div>
|
||||
<div class="in">
|
||||
<a-radio v-model:checked="checked"
|
||||
><span
|
||||
style="
|
||||
<a-radio @click="changeChecked1" v-model:checked="checked1"><span style="
|
||||
width: 100%;
|
||||
color: rgba(109, 117, 132, 1);
|
||||
font-size: 14px;
|
||||
"
|
||||
>BOEU实施</span
|
||||
></a-radio
|
||||
>
|
||||
">BOEU实施</span></a-radio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name name2">
|
||||
<div class="namebox" style="margin-top: 8px">
|
||||
<img
|
||||
class="nameimg"
|
||||
src="../../assets/images/basicinfo/asterisk.png"
|
||||
/>
|
||||
<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
|
||||
<div class="inname">附件</div>
|
||||
</div>
|
||||
<div class="filebox">
|
||||
<div style="cursor: pointer">
|
||||
<img
|
||||
class="fileimg"
|
||||
src="../../assets/images/projectadd/enclosure.png"
|
||||
/>
|
||||
<span class="filetext">上传附件</span>
|
||||
<div>
|
||||
<img v-if="fileList1.length < 6" class="fileimg" src="../../assets/images/projectadd/enclosure.png" />
|
||||
<a-upload :disabled="fileList1.length > 5" :before-upload="beforeUpload1" v-model:file-list="fileList1"
|
||||
@remove="removeFile" name="file" action="/api/file/upload" :headers="headers" @change="handleChange1">
|
||||
<!-- <a-button> -->
|
||||
<!-- <upload-outlined></upload-outlined> -->
|
||||
<span v-if="fileList1.length > 5" class="filetext">上传数量已经达到最大值</span>
|
||||
<span v-else class="filetext">上传附件</span>
|
||||
<!-- </a-button> -->
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="support">
|
||||
支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
|
||||
@@ -229,76 +201,381 @@
|
||||
</div>
|
||||
<div class="template">
|
||||
<div class="name">
|
||||
<div class="inname" style="width: 50px">模板</div>
|
||||
<div class="inname" style="width: 50px">模版</div>
|
||||
<div class="in select" style="margin-left: 2px">
|
||||
<a-select
|
||||
v-model:value="value1"
|
||||
placeholder="请选择模板"
|
||||
:size="size"
|
||||
style="width: 100%"
|
||||
:options="options"
|
||||
></a-select>
|
||||
<a-select :getPopupContainer="
|
||||
(triggerNode) => {
|
||||
return triggerNode.parentNode || document.body;
|
||||
}
|
||||
" v-model:value="classifySelect5" placeholder="请选择模版" :size="size" style="width: 100%" :options="classifyList5"
|
||||
@change="classificationChange5">
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="btn">
|
||||
<a-button
|
||||
type="primary"
|
||||
style="width: 100px; height: 40px; border-radius: 8px"
|
||||
>确认</a-button
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
ghost
|
||||
style="
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
margin-left: 14px;
|
||||
border-radius: 8px;
|
||||
"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button v-on:click="createProject" type="primary" class="btn1">确定</a-button>
|
||||
<a-button class="btn2">取消</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import { reactive, toRefs, ref } from "vue";
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import * as api from "../../api/index";
|
||||
|
||||
export default {
|
||||
name: "sonProject",
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const routers = useRoute();
|
||||
const state = reactive({
|
||||
classifyList: [
|
||||
{
|
||||
id: 1,
|
||||
name: "分类一",
|
||||
label: "分类一",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "分类二",
|
||||
label: "分类二",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "分类三",
|
||||
label: "分类三",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "分类四",
|
||||
label: "分类四",
|
||||
},
|
||||
],
|
||||
classifySelect: null,
|
||||
classifySelectId: null,
|
||||
checked: false,
|
||||
checked1: false,
|
||||
valueE: null,
|
||||
valueE1: null,
|
||||
valueE2: null,
|
||||
|
||||
projectAscription:'',
|
||||
});
|
||||
|
||||
const projectName = ref('');
|
||||
|
||||
state.projectAscription = routers.query.name;
|
||||
|
||||
const classifyList = ref([
|
||||
{ value: 1, label: '管理者' },
|
||||
{ value: 2, label: '领军者' },
|
||||
{ value: 3, label: '产业人' },
|
||||
]);
|
||||
|
||||
let projectType = "";
|
||||
|
||||
const classificationChange = (value) => {
|
||||
console.log(`selected ${value}`);
|
||||
projectType = value;
|
||||
};
|
||||
|
||||
function getBase64(img, callback) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', () => callback(reader.result));
|
||||
reader.readAsDataURL(img);
|
||||
}
|
||||
|
||||
const fileList = ref([]);
|
||||
const fileList1 = ref([]);
|
||||
const loading = ref(false);
|
||||
const imageUrl = ref('');
|
||||
let picUrl = '';
|
||||
|
||||
const handleChange = (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
loading.value = true;
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
console.log('上传图片返回的信息 %o', info)
|
||||
picUrl = info.file.response.data;
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, (base64Url) => {
|
||||
imageUrl.value = base64Url;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
if (info.file.status === 'error') {
|
||||
loading.value = false;
|
||||
message.error('upload error');
|
||||
}
|
||||
};
|
||||
|
||||
let uplodaFileCount = false;
|
||||
|
||||
let attach = "";
|
||||
let attachData = "";
|
||||
const handleChange1 = (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
loading.value = true;
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
console.log('上传附件返回的信息 %o', info, info.fileList.length, uplodaFileCount)
|
||||
|
||||
let attachStr = "";
|
||||
attachData = info.fileList;
|
||||
for (let i = 0; i < attachData.length; i++) {
|
||||
if (attachData.length - 1 == i) {
|
||||
attachStr += attachData[i].response.data;
|
||||
} else {
|
||||
attachStr += attachData[i].response.data + ',';
|
||||
}
|
||||
}
|
||||
console.log(attachStr)
|
||||
attach = attachStr;
|
||||
|
||||
if (info.fileList.length > 5) {
|
||||
uplodaFileCount = true;
|
||||
} else {
|
||||
uplodaFileCount = false;
|
||||
}
|
||||
}
|
||||
if (info.file.status === 'error') {
|
||||
loading.value = false;
|
||||
message.error('upload error');
|
||||
}
|
||||
};
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload JPG file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 1;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 1MB!');
|
||||
}
|
||||
return isJpgOrPng && isLt2M;
|
||||
};
|
||||
|
||||
const beforeUpload1 = () => {
|
||||
return new Promise((resovle, reject) => {
|
||||
if (uplodaFileCount) {
|
||||
message.info("上传文件数量已达最大数量")
|
||||
return reject(false);
|
||||
}
|
||||
return resovle(true);
|
||||
})
|
||||
};
|
||||
|
||||
let beginTime = "";
|
||||
let endTime = "";
|
||||
const onRangeChange = (value, dateString) => {
|
||||
console.log('Selected Time: ', value);
|
||||
// 项目时间选择函数
|
||||
console.log('Formatted Selected Time: ', dateString);
|
||||
console.log('Formatted Selected TimeStamp', new Date(dateString[0]).getTime())
|
||||
beginTime = new Date(dateString[0]).getTime() / 1000;
|
||||
endTime = new Date(dateString[1]).getTime() / 1000;
|
||||
};
|
||||
|
||||
|
||||
// 项目经理 后续接口调用
|
||||
const classifyList1 = ref([
|
||||
{ value: 1, label: '李俊国' },
|
||||
{ value: 2, label: '将小米' },
|
||||
{ value: 3, label: '刘孟君' },
|
||||
]);
|
||||
|
||||
let manager = "";
|
||||
let managerId = "";
|
||||
const classificationChange1 = (key) => {
|
||||
console.log(`selected ${key}`, classifyList1);
|
||||
let mstr = '';
|
||||
let midstr = '';
|
||||
for (let i = 0; i < key.length; i++) {
|
||||
if (key.length - 1 !== i) {
|
||||
midstr += key[i] + ',';
|
||||
mstr += classifyList1.value[i].label + ',';
|
||||
} else {
|
||||
midstr += key[i];
|
||||
mstr += classifyList1.value[i].label;
|
||||
}
|
||||
}
|
||||
console.log(mstr, midstr)
|
||||
manager = mstr;
|
||||
managerId = midstr;
|
||||
};
|
||||
|
||||
// 资源归属 sourceBelongId 后续给接口
|
||||
const classifyList2 = ref([
|
||||
{ value: 1, label: '项目一' },
|
||||
{ value: 2, label: '项目二' },
|
||||
{ value: 3, label: '项目三' },
|
||||
]);
|
||||
|
||||
const classificationChange2 = (key) => {
|
||||
console.log(`selected ${key}`, classifyList2);
|
||||
}
|
||||
|
||||
// 项目级别
|
||||
const classifyList3 = ref([
|
||||
{ value: 1, label: '集团级' },
|
||||
{ value: 2, label: '组织级' },
|
||||
{ value: 3, label: '现地级' },
|
||||
{ value: 4, label: '部门级' },
|
||||
]);
|
||||
const classificationChange3 = (key) => {
|
||||
console.log(`selected ${key}`, classifyList3);
|
||||
}
|
||||
|
||||
// 培训体系
|
||||
const classifyList4 = ref([
|
||||
{ value: 1, label: '集团级' },
|
||||
{ value: 2, label: '组织级' },
|
||||
{ value: 3, label: '现地级' },
|
||||
{ value: 4, label: '部门级' },
|
||||
]);
|
||||
const classificationChange4 = (key) => {
|
||||
console.log(`selected ${key}`, classifyList4);
|
||||
}
|
||||
|
||||
// 模版
|
||||
const classifyList5 = ref([
|
||||
{ value: 1, label: '模版一' },
|
||||
{ value: 2, label: '模版二' },
|
||||
{ value: 3, label: '模版三' },
|
||||
{ value: 4, label: '模版四' },
|
||||
]);
|
||||
const classificationChange5 = (key) => {
|
||||
console.log(`selected ${key}`, classifyList5);
|
||||
}
|
||||
|
||||
// 项目说明
|
||||
const remark = ref('');
|
||||
|
||||
let courseSyncFlag = 0;
|
||||
const changeChecked = () => {
|
||||
console.log(state.checked)
|
||||
state.checked ? state.checked = false : state.checked = true;
|
||||
courseSyncFlag = state.checked ? 1 : 0;
|
||||
}
|
||||
|
||||
let boeFlag = 0;
|
||||
const changeChecked1 = () => {
|
||||
console.log(state.checked1)
|
||||
state.checked1 ? state.checked1 = false : state.checked1 = true;
|
||||
boeFlag = state.checked1 ? 1 : 0;
|
||||
}
|
||||
|
||||
const removeFile = (file) => {
|
||||
const index = fileList1.value.indexOf(file);
|
||||
const newFileList = fileList1.value.slice();
|
||||
newFileList.splice(index, 1);
|
||||
fileList1.value = newFileList;
|
||||
|
||||
let attachStr = "";
|
||||
if (newFileList.length == 0) {
|
||||
attachStr = "";
|
||||
}
|
||||
for (let i = 0; i < fileList1["value"].length; i++) {
|
||||
console.log(fileList1["value"][i].response.data)
|
||||
if (fileList1["value"].length - 1 == i) {
|
||||
attachStr += fileList1["value"][i].response.data;
|
||||
} else {
|
||||
attachStr += fileList1["value"][i].response.data + ',';
|
||||
}
|
||||
}
|
||||
attach = attachStr;
|
||||
}
|
||||
|
||||
|
||||
const errorMsgs = {
|
||||
"name": "请输入项目名称",
|
||||
"category": "请选择项目分类",
|
||||
"picUrl": "请上传项目封面图",
|
||||
"beginTime": "请选择项目开始时间",
|
||||
"endTime": "请选择项目结束时间",
|
||||
"manager": "请选择项目经理",
|
||||
"managerId": "请选择项目经理",
|
||||
"sourceBelongId": "请选择资源归属",
|
||||
"level": "请填写项目级别",
|
||||
"systemId": "请填写项目培训体系",
|
||||
"boeFlag": "请选择是否BOE实施",
|
||||
"attach": "请上传附件"
|
||||
}
|
||||
|
||||
const createProject = () => {
|
||||
let obj = {
|
||||
"name": projectName["value"],
|
||||
"category": projectType,
|
||||
"picUrl": picUrl,
|
||||
"beginTime": beginTime,
|
||||
"endTime": endTime,
|
||||
"manager": manager,
|
||||
"managerId": managerId,
|
||||
"sourceBelongId": 11,
|
||||
"remark": remark["value"],
|
||||
"courseSyncFlag": courseSyncFlag,
|
||||
"level": 3,
|
||||
"systemId": 4,
|
||||
"boeFlag": boeFlag,
|
||||
"attach": attach,
|
||||
"type": 3,
|
||||
"templateId": 10,
|
||||
"parentId": routers.query.projectId,
|
||||
"notice": "",
|
||||
"noticeFlag": 0,
|
||||
"status": 0
|
||||
}
|
||||
console.log('提交的数据格式 %o', obj)
|
||||
for (let i in errorMsgs) {
|
||||
console.log(obj[i])
|
||||
if (obj[i] === "" || obj[i] === undefined) {
|
||||
message.destroy()
|
||||
message.warning(errorMsgs[i])
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
api.createProject(obj).then(res => {
|
||||
console.log(res)
|
||||
if (res.status == 200 && res.data.code == 200) {
|
||||
message.destroy();
|
||||
message.success("创建成功")
|
||||
setTimeout(() => {
|
||||
router.push({
|
||||
path: '/taskpage',
|
||||
query: { id: res.data.data.projectId }
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
message.destroy();
|
||||
message.error("创建失败，请检查当前网络状态。")
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
message.destroy();
|
||||
message.error("创建失败，请检查当前网络状态。")
|
||||
})
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
projectName,
|
||||
classifyList,
|
||||
classificationChange,
|
||||
classificationChange1,
|
||||
classificationChange2,
|
||||
classificationChange3,
|
||||
classificationChange4,
|
||||
classificationChange5,
|
||||
fileList,
|
||||
fileList1,
|
||||
loading,
|
||||
imageUrl,
|
||||
handleChange,
|
||||
handleChange1,
|
||||
beforeUpload,
|
||||
beforeUpload1,
|
||||
onRangeChange,
|
||||
classifyList1,
|
||||
classifyList2,
|
||||
classifyList3,
|
||||
classifyList4,
|
||||
classifyList5,
|
||||
remark,
|
||||
changeChecked,
|
||||
changeChecked1,
|
||||
uplodaFileCount,
|
||||
createProject,
|
||||
removeFile
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@@ -313,6 +590,7 @@ export default {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
@@ -321,10 +599,12 @@ export default {
|
||||
padding-left: 37px;
|
||||
//font-weight: 500;
|
||||
}
|
||||
|
||||
.goback {
|
||||
padding-right: 70px;
|
||||
//padding-top: 37px;
|
||||
position: relative;
|
||||
|
||||
.return {
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
@@ -333,6 +613,7 @@ export default {
|
||||
margin-right: 10px;
|
||||
background-image: url("../../assets/images/projectadd/return.png");
|
||||
}
|
||||
|
||||
.returntext {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@@ -342,8 +623,15 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修改 antd upload 样式
|
||||
.ant-upload {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
.main {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
@@ -352,12 +640,14 @@ export default {
|
||||
//justify-content: center;
|
||||
float: left;
|
||||
border-right: 1px solid rgba(153, 155, 163, 0.3);
|
||||
|
||||
.name {
|
||||
width: 78%;
|
||||
// background-color: lightcoral;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
|
||||
//height: 40px;
|
||||
// border: 1px solid black;
|
||||
.namebox {
|
||||
@@ -366,19 +656,23 @@ export default {
|
||||
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%;
|
||||
@@ -388,6 +682,7 @@ export default {
|
||||
margin-top: -5px;
|
||||
border-top: 2px solid rgba(78, 166, 255, 1);
|
||||
}
|
||||
|
||||
.box2 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -398,31 +693,42 @@ export default {
|
||||
border-left: 2px solid rgba(78, 166, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.inname {
|
||||
color: #6f6f6f;
|
||||
font-size: 14px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.in {
|
||||
margin-left: 14px;
|
||||
flex: 1;
|
||||
|
||||
// .ant-radio-wrapper {
|
||||
// }
|
||||
.ant-input-textarea-show-count {
|
||||
position: relative;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.ant-input-textarea-show-count::after {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
padding: 0 11px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
@@ -430,33 +736,39 @@ export default {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.filebox {
|
||||
margin-left: 14px;
|
||||
flex: 1;
|
||||
|
||||
.fileimg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.filetext {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.support {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #999ba3;
|
||||
line-height: 36px;
|
||||
//margin-top: 8px;
|
||||
margin-top: 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name2 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.ant-input-textarea {
|
||||
.ant-input {
|
||||
height: 88px;
|
||||
@@ -464,6 +776,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
@@ -471,6 +784,7 @@ export default {
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
float: right;
|
||||
|
||||
.name {
|
||||
width: 78%;
|
||||
// background-color: lightcoral;
|
||||
@@ -478,27 +792,32 @@ export default {
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
|
||||
// border: 1px solid black;
|
||||
.d {
|
||||
margin-top: 8px;
|
||||
font-size: 25px;
|
||||
color: #ff4e4e;
|
||||
}
|
||||
|
||||
.inname {
|
||||
color: #6f6f6f;
|
||||
font-size: 14px;
|
||||
margin-left: 7px;
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.in {
|
||||
margin-left: 14px;
|
||||
width: 81%;
|
||||
|
||||
.ant-input {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
@@ -509,15 +828,42 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
margin-top: 31px;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.btn1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #409eff;
|
||||
background: #ffffff;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: rgba(153, 155, 163, 1);
|
||||
font-size: 14px;
|
||||
@@ -526,3 +872,4 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user