suzhou-jichuang-lanhai
/
suzhouzhiyuanzheguanliPC
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

志愿者首页

Browse Source
Lvtianfang
吕天方 1 year ago
parent 5013a22cfc
commit 5d2ecad061
2 changed files with 117 additions and 319 deletions
Show Stats Download Patch File Download Diff File

47
src/views/components/myInput/index.vue
Unescape View File

@ -0,0 +1,47 @@
<template>
<div class="my-inputs">
<el-input v-model="input" placeholder="请输入内容" @change="inputValue"></el-input>
<div class="btn"><i class="el-icon-search"></i></div>
</div>
</template>
<script>
export default {
data() {
return {
input:'',
}
},
methods:{
inputValue(e){
this.$emit('changeInput',e)
},
},
}
</script>
<style lang="scss" scoped>
.my-inputs {
display: flex;
::v-deep .el-input {
width: 515px;
height: 43px;
.el-input__inner {
width: 100%;
height: 100%;
border-right: none;
border-radius: 4px 0 0 4px;
border: 1px solid #DBD7D7;
}
}
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 43px;
border-radius: 0 4px 4px 0;
background-color: #F8414D;
cursor: pointer;
color: #fff;
}
}
</style>

389
src/views/yingji/planManage.vue
Unescape View File

@ -2,64 +2,14 @@
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-09-04 10:20:06
* @Date: 2023-09-18 10:08:30
* @LastEditors: JC9527
* @LastEditTime: 2023-09-13 17:22:51
* @LastEditTime: 2023-09-18 11:07:21
-->
<template>
<div class="plan-management">
<div class="plan-topBox">
<div class="drup-downs">
<div class="year">
<div class="year-span">年份:</div>
<!-- <el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in optionsyear"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select> -->
<el-date-picker
v-model="form.plannedYear"
type="month"
format="yyyy-MM"
:clearable="false"
value-format="yyyy-MM"
placeholder="请选择年份">
</el-date-picker>
</div>
<div class="area">
<div class="area-span">区划:</div>
<!-- <el-select v-model="value2" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select> -->
<!-- <div class="block">
<span class="demonstration">默认 click 触发子菜单</span> -->
<el-cascader
v-model="form.district"
placeholder="请选择"
:options="options"
:props="props"
@change="handleChange"></el-cascader>
<!-- </div> -->
</div>
</div>
<div class="btns">
<div class="export" @click="exportFile">
<img src="@/assets/images/export.png" alt="">
<span>导出excel</span>
</div>
<div class="newProject" @click="newProject">
<img src="@/assets/images/newProject.png" alt="">
<span>新增计划</span>
</div>
</div>
<my-input @changeInput="changeInput"></my-input>
</div>
<div class="plan-bottomBox">
<div class="tables">
@ -69,52 +19,46 @@
:height="484"
v-loading="loading"
tooltip-effect="light"
@selection-change="handleSelectionChange"
:row-class-name="tableRowClassName"
>
<el-table-column
type="selection"
width="55"
label="序号"
type="index"
header-align="center"
>
width="70">
</el-table-column>
<el-table-column
prop="plannedYear"
label="计划年份"
width="180"
header-align="center"
prop="content"
label="参与活动"
width="280"
>
<template slot-scope="scope">
<div class="activity">
<div>{{ scope.row.content.split(' ')[0] }}</div>
<div>{{ scope.row.content.split(' ')[1] }}</div>
</div>
</template>
</el-table-column>
<el-table-column
prop="district"
label="行政区划"
prop="person"
label="参与人员"
show-overflow-tooltip
width="180"
header-align="center"
>
</el-table-column>
<el-table-column
prop="planNumb"
label="计划企业数量"
header-align="center"
prop="duration"
label="服务活动时长"
>
</el-table-column>
<el-table-column
prop="keyCount"
label="省重点数"
header-align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
header-align="center"
prop="time"
label="参与时间"
>
</el-table-column>
<el-table-column
label="操作"
width="250"
header-align="center"
>
<template slot-scope="scope">
<div class="tabs-btns">
@ -122,14 +66,7 @@
<img src="@/assets/images/look.png" alt="">
<span>查看</span>
</div>
<div class="change" @click="change(scope.row)">
<img src="@/assets/images/change.png" alt="">
<span>修改</span>
</div>
<div class="delete" @click="deleteItem(scope.row)">
<img src="@/assets/images/delete.png" alt="">
<span>删除</span>
</div>
<div><span>评估评分：</span></div>
</div>
</template>
</el-table-column>
@ -139,34 +76,24 @@
<my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
</div>
</div>
<my-dialog ref="myDialog" v-on:close="padlock"></my-dialog>
<my-dialogtwo ref="myDialogTwo"></my-dialogtwo>
</div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue"
import myDialog from "@/views/components/dialog/index.vue"
import myDialogtwo from "@/views/components/dialogTwo/index.vue"
import myInput from "@/views/components/myInput/index.vue"
export default {
components:{myPagination,myDialog,myDialogtwo},
components:{myPagination,myInput},
data() {
return {
optionsyear:[],
options:[
tableData: [
{
content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
}
],
form:{
district:'',
plannedYear:''
},
props:{
value:'county',
label:'institutionName'
},
value:'2022',
value2:'苏州',
tableData: [],
multipleSelection: [],
input: '',
pages:{
pageSize:10,
pageNum:1
@ -181,108 +108,20 @@
// console.log(pages)
this.getList(pages)
},
// 选中的数据
handleSelectionChange(val) {
// 选中的数组
this.multipleSelection = val;
},
// 导出
exportFile(){
console.log(this.multipleSelection)
},
// 新增计划
newProject(){
this.$refs.myDialog.open('newlyIncreased')
},
// 新增成功后关闭dialog事件触发
padlock(){
this.getList(this.pages);
},
// 区划级联选择器选择触发
handleChange(value){
console.log(value)
},
// 查看
look(row){
this.$refs.myDialogTwo.open(row);
},
// 修改
change(row){
this.$refs.myDialog.open(row)
},
// 删除
deleteItem(row){
let idList = [];
idList.push(row.id)
this.$modal.confirm("你确认要删除该条数据吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async() => {
this.loading = true;
try {
let data = await this.$api.yingji.bPlanManage('delete',_,{idList:idList.join(',')})
if(data.code == 200) {
this.loading = false;
this.$message({
message: '删除成功',
type: 'success'
});
this.getList();
}
} catch (error) {
console.log(error)
}
})
.catch(() => {
console.log('取消删除')
});
},
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 !== 0) {
return 'success-row';
}
return '';
// 输入框的值
changeInput(value){
this.input = value;
},
// 获取list表
async getList(pages){
this.loading = true;
let res = await this.$api.yingji.bPlanManage('get',_,pages);
console.log(res);
if(res.code == 200) {
this.loading = false;
}
this.tableData = res.data.list;
this.total = res.data.total
},
commentData(item){
if(item instanceof Array) {
item.map((item)=>{
if(item.children instanceof Array && item.children.length == 0){
delete item.children;
} else {
this.props.value = 'subdistrict'
this.commentData(item.children)
}
})
}
this.options = item
// tabs不同行给不同class
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
},
async created() {
this.checkListTwo = this.checkList;
// this.$nextTick(()=>{
// let dom = document.getElementsByClassName('tables');
// let height = dom[0].getBoundingClientRect();
// let windowHeight = window.innerHeight;
// let relativeHeight = windowHeight - height.top
// this.main.height = relativeHeight - 80
// console.log(this.main.height)
// })
let data = await this.$api.yingji.tree();
this.commentData(data.data)
this.getList(this.pages);
},
}
</script>
@ -292,110 +131,7 @@
background-color: #fff;
height: 100%;
.plan-topBox {
display: flex;
justify-content: space-between;
padding: 31px 0 12px 0;
// background-color: yellow;
.drup-downs {
display: flex;
align-items: center;
.year {
display: flex;
align-items: center;
margin-right: 81px;
.year-span {
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
}
.area {
display: flex;
align-items: center;
.area-span {
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
::v-deep .el-cascader {
background-color: transparent;
width: 276px;
.el-input__inner {
height: 33px;
}
.el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-down::before {
content: "";
background: url(../../assets/images/down2.png) center center no-repeat;
background-size: cover;
position: absolute;
width: 10px;
height: 7px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
::v-deep .el-select {
background-color: transparent;
width: 276px;
.el-input__inner {
height: 33px;
}
.el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up {
display: flex;
align-items: center;
justify-content: center;
}
// border-radius: 2px;
.el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up::before {
content: "";
background: url(../../assets/images/down2.png) center center no-repeat;
background-size: cover;
position: absolute;
width: 10px;
height: 7px;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
transform: rotate(180deg);
}
}
}
.btns {
display: flex;
align-items: center;
.export,.newProject {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 19px;
cursor: pointer;
img {
width: 22px;
margin-right: 10px;
}
span {
color: #ffffff;
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
}
}
.export {
background-color: #2378EC;
margin-right: 30px;
}
.newProject {
background-color: #28B384;
}
}
padding: 20px 0;
}
.plan-bottomBox {
margin-top: 10px;
@ -404,10 +140,31 @@
.success-row {
background-color: rgba(234, 242, 253, 0.25);
}
.activity {
div {
text-align: left;
&:nth-child(1) {
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
color: #4D4949;
}
&:nth-child(2) {
width: 180px;
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
color: #999191;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
td {
height: 42px;
box-sizing: border-box;
text-align: center;
// text-align: center;
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-weight: 400;
@ -415,11 +172,11 @@
}
th {
height: 45px;
background-color: #EAF2FD;
background-color: #F7F5F5;
font-size: 15px;
font-family: 'Alibaba PuHuiTi';
font-weight: bold;
color: #525966;
color: #4D4949;
.el-checkbox {
display: none;
}
@ -431,10 +188,10 @@
.tabs-btns {
display: flex;
align-items: center;
justify-content: center;
.look,.change,.delete {
// justify-content: center;
.look{
display: flex;
align-items: center;
// align-items: center;
margin-right: 30px;
cursor: pointer;
img {
@ -448,12 +205,6 @@
color: #045FFD;
}
}
.delete {
margin-right: 0;
span {
color: #F71052;
}
}
}
}
.pagination {

Write Preview
Loading…
Cancel
Save