367 lines
9.5 KiB
Vue
367 lines
9.5 KiB
Vue
<template>
|
|
<div class="percentage-content">
|
|
<el-radio-group class="rg" v-model="tabIndex" @change="clickRadio">
|
|
<template v-for="item in tabs" :key="item.sortId">
|
|
<el-radio-button :label="item.sortId">{{
|
|
item.typeName
|
|
}}</el-radio-button>
|
|
</template>
|
|
</el-radio-group>
|
|
<div class="content">
|
|
<div class="h-layout space-between h-center">
|
|
<div>
|
|
<div class="h-layout h-center">
|
|
<div class="tool-item" @click="getList">
|
|
<svg-icon name="refurbish" class="icon" />
|
|
<span>刷新</span>
|
|
</div>
|
|
|
|
<div
|
|
class="tool-item"
|
|
@click="(dialogVisible = true), (form = {}), (readonly = false)"
|
|
>
|
|
<svg-icon name="add" class="icon" />
|
|
<span>新增</span>
|
|
</div>
|
|
<div class="tool-item" @click="fileExport">
|
|
<svg-icon name="export" class="icon" />
|
|
<span>导出</span>
|
|
</div>
|
|
<div class="label-select filter-tab">
|
|
<label>岗位</label>
|
|
<el-cascader
|
|
@change="getList"
|
|
ref="cascader"
|
|
v-model="search.postId"
|
|
placeholder="请选择岗位"
|
|
:options="postTree"
|
|
:props="{
|
|
checkStrictly: true,
|
|
label: 'performclassname',
|
|
value: 'listperformid',
|
|
}"
|
|
clearable
|
|
style="width: 300px;"
|
|
></el-cascader>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 30%;">
|
|
<div>
|
|
<el-input
|
|
v-model="search.condition"
|
|
placeholder="请输入关键字"
|
|
class="search-input"
|
|
>
|
|
<template #append>
|
|
<span class="search-bottom" @click="getList">
|
|
<svg-icon name="search" class="icon_class" />
|
|
<span>搜索</span>
|
|
</span>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
ref="loading"
|
|
class="table"
|
|
v-loading="tableDataloading"
|
|
:data="tableData"
|
|
header-row-class-name="el-one-header"
|
|
border
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
:resizable="true"
|
|
width="100"
|
|
label="序列"
|
|
type="index"
|
|
>
|
|
<template #default="scope">
|
|
{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="title"
|
|
:resizable="true"
|
|
align="center"
|
|
label="动态标题"
|
|
width="150"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="detail"
|
|
:resizable="true"
|
|
align="center"
|
|
label="动态内容"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="startTime"
|
|
align="center"
|
|
label="开始时间"
|
|
width="190"
|
|
/>
|
|
<el-table-column
|
|
prop="endTime"
|
|
align="center"
|
|
label="结束时间"
|
|
width="190"
|
|
/>
|
|
<el-table-column
|
|
prop="chinaName"
|
|
:resizable="true"
|
|
align="center"
|
|
label="发布人"
|
|
width="120"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="postName"
|
|
:resizable="true"
|
|
align="center"
|
|
label=" 发布人岗位"
|
|
width="180"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:resizable="true"
|
|
align="center"
|
|
width="300"
|
|
label="操作"
|
|
>
|
|
<template #default="scope">
|
|
<!-- <span
|
|
class="operate"
|
|
@click="(dialogVisible = true), (form = scope.row),(readonly = false)"
|
|
>
|
|
<svg-icon name="edit" class="icon"></svg-icon>
|
|
<span class="edit">编辑</span>
|
|
</span> -->
|
|
<span
|
|
class="operate"
|
|
@click="
|
|
(form = scope.row), (dialogVisible = true), (readonly = true)
|
|
"
|
|
>
|
|
<svg-icon name="detail" class="icon"></svg-icon>
|
|
<span class="detail">详情</span>
|
|
</span>
|
|
|
|
<span class="operate" @click="deletelist(scope.row)">
|
|
<svg-icon name="delete" class="icon"></svg-icon>
|
|
<span class="func">删除</span>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
class="pagination"
|
|
v-model:current-page.sync="currentPage"
|
|
:page-sizes="[10, 15, 20, 30]"
|
|
v-model:page-size.sync="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
background
|
|
>
|
|
</el-pagination>
|
|
<!-- 新增 -->
|
|
<Add
|
|
:visible="dialogVisible"
|
|
:form="form"
|
|
:readonly="readonly"
|
|
@close="onclone"
|
|
:typeId="typeId"
|
|
:tabsTitle="tabsTitle"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
import { onMounted, reactive, ref } from "vue";
|
|
import Add from "./components/add.vue";
|
|
import { ElMessageBox, ElMessage } from "element-plus";
|
|
import { wkTypes, wkDynamicsAllPage, deleteWork } from "@/api/Work";
|
|
import { exportFileRequest } from "@/api/export";
|
|
import useUserStore from "@/store/modules/user";
|
|
import { areaTree } from "@/api/account";
|
|
import { getListperformTree } from "@/api/Sys";
|
|
const userStore = useUserStore();
|
|
const user = ref(JSON.parse(userStore.userInfo));
|
|
const userId = ref(user.value.userId);
|
|
|
|
const tabIndex = ref(0);
|
|
const tabs = ref([{ typeName: "常规工作", sortId: 1 }]);
|
|
|
|
const search = ref({});
|
|
const currentPage = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(0);
|
|
|
|
const readonly = ref(false);
|
|
const dialogVisible = ref(false);
|
|
const form = ref({});
|
|
|
|
//获取列表
|
|
const tableDataloading = ref(false);
|
|
const tableData = ref([
|
|
{ cName: "xxx村名", name: "村长名称", phone: "村长电话" },
|
|
]);
|
|
const getWkDynamicsPage = () => {
|
|
tableDataloading.value = true;
|
|
let params = {
|
|
userId: userId.value,
|
|
limit: pageSize.value,
|
|
page: currentPage.value,
|
|
typeId: typeId.value,
|
|
condition: search.value.condition,
|
|
postId: "",
|
|
};
|
|
if (search.value.postId) {
|
|
params.postId = search.value.postId[search.value.postId.length - 1];
|
|
}
|
|
wkDynamicsAllPage(params).then((res: any) => {
|
|
console.log(res, "res==>");
|
|
tableData.value = res.data.list;
|
|
total.value = res.data.total;
|
|
tableDataloading.value = false;
|
|
});
|
|
};
|
|
|
|
//弹窗标题
|
|
const tabsTitle = ref("");
|
|
//头部点击取id
|
|
const clickRadio = () => {
|
|
tabs.value.forEach((item) => {
|
|
if (item.sortId == tabIndex.value) {
|
|
typeId.value = item.typeId;
|
|
tabsTitle.value = item.typeName;
|
|
}
|
|
});
|
|
getList();
|
|
};
|
|
//关闭新增弹窗
|
|
const onclone = () => {
|
|
dialogVisible.value = false;
|
|
form.value = {};
|
|
getList();
|
|
};
|
|
//工作类型
|
|
const typeId = ref("");
|
|
const getWkTypes = () => {
|
|
let params = {
|
|
classify: 2,
|
|
};
|
|
wkTypes(params).then((res: any) => {
|
|
tabs.value = res.data;
|
|
typeId.value = res.data[0].typeId;
|
|
tabsTitle.value = res.data[0].typeName;
|
|
tabIndex.value = 1;
|
|
getWkDynamicsPage();
|
|
});
|
|
};
|
|
//删除
|
|
const deletelist = (data) => {
|
|
ElMessageBox.confirm("是否确认删除?", "提示", {
|
|
confirmButtonText: "是",
|
|
cancelButtonText: "否",
|
|
type: "warning",
|
|
}).then(() => {
|
|
let params = {
|
|
workId: data.dynamicsId,
|
|
classify: 2,
|
|
};
|
|
deleteWork(params).then((res: any) => {
|
|
if (res.code == 1) {
|
|
ElMessage.success({
|
|
message: "删除成功",
|
|
type: "success",
|
|
});
|
|
} else {
|
|
ElMessage.error({
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
getList();
|
|
});
|
|
});
|
|
};
|
|
|
|
//获取地区
|
|
const postTree = ref([]);
|
|
const getListperformTrees = () => {
|
|
getListperformTree().then((res: any) => {
|
|
console.log(res.data, "res.data===>");
|
|
|
|
postTree.value = res.data;
|
|
});
|
|
};
|
|
//刷新
|
|
const getList = () => {
|
|
currentPage.value = 1;
|
|
getWkDynamicsPage();
|
|
};
|
|
//导出
|
|
const fileExport = () => {
|
|
const params = {
|
|
userId: userId.value,
|
|
postId: "",
|
|
condition: search.value.condition,
|
|
startTime: "",
|
|
endTime: "",
|
|
typeId: typeId.value,
|
|
};
|
|
if (search.value.postId) {
|
|
params.postId = search.value.postId[search.value.postId.length - 1];
|
|
}
|
|
let name = tabsTitle.value;
|
|
exportFileRequest(
|
|
`/admin/export/exportWorkDynamic`,
|
|
`${name}统计.xlsx`,
|
|
params
|
|
).then((res) => {});
|
|
};
|
|
onMounted(() => {
|
|
getWkTypes();
|
|
getListperformTrees();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.percentage-content {
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.rg {
|
|
padding: 16px;
|
|
background: #fff;
|
|
box-shadow: 0 0 6px rgb(0 120 255 / 10%);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 10px;
|
|
:deep(.el-radio-button__inner) {
|
|
min-width: 150px;
|
|
}
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 0.26042vw;
|
|
box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
|
|
height: 100%;
|
|
padding: 0.83333vw;
|
|
overflow-y: auto;
|
|
overflow-x: hidden !important;
|
|
box-sizing: border-box;
|
|
.table {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|