<template>
<!--批量选择明细表数据 -->
<vol-box :lazy="true" v-model="detailModel" title="批量选择明细表数据" :width="1200" :padding="0">
<div>
<!-- 搜索配置 -->
<div class="search-form">
<VolForm ref="myform" :label-width="150" :loadKey="true" :formFields="formFields1"
:formRules="formRules1"></VolForm>
<el-button size="small" type="primary" @click="search">搜索</el-button>
</div>
<!-- 表格数据 -->
<vol-table ref="detailTable" :loadKey="true" :columns="columns" :pagination-hide="false" :height="420"
:url="url" @loadBefore="loadBefore" @rowClick="rowClick"></vol-table>
</div>
<template #footer>
<div>
<el-button type="primary" @click="detailSelectClick" size="mini">选择数据</el-button>
</div>
</template>
</vol-box>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolTable from "@/components/basic/VolTable.vue";
import VolForm from "@/components/basic/VolForm.vue";
import { ElMessage } from "element-plus";
import http from "@/api/http";
//这里使用的vue2语法，也可以写成vue3语法
export default {
components: {
"vol-box": VolBox,
VolTable,
VolForm,
},
methods: {},
data() {
return {
formFields1: {
Title: "",
Type: "",
IsEnable: "",
},
formRules1: [
[
{ title: "标题", field: "Title", type: "text" },
{
dataKey: "汇报类型",
data: [],
title: "汇报类型",
field: "Type",
type: "select",
},
{
dataKey: "enable",
data: [],
title: "是否作废",
field: "IsEnable",
type: "select",
},
],
],
parentPage: "", //父页面（1：工作汇报；2：项目变更记录）
model: false, //弹出框
detailModel: false, //批量选择明细表数据model、
//调用的接口地址
url: "api/WorkReportInfo/getPageData",
//表格配置(可以将生成vue文件中columns配置复制过来)
columns: [
{ field: "Title", title: "标题", type: "string", width: 120, align: "left" },
{
field: "Type",
title: "汇报类型",
type: "int",
bind: { key: "汇报类型", data: [] },
sort: true,
width: 150,
require: true,
align: "left",
},
{ field: "AttachImgUrl", title: "图片", type: "img", width: 120, align: "left" },
{
field: "AttachFileUrl",
title: "附件",
type: "file",
width: 150,
align: "left",
},
{
field: "IsEnable",
title: "是否作废",
type: "int",
bind: { key: "enable", data: [] },
sort: true,
width: 150,
require: true,
align: "left",
},
{
field: "SourceDev",
title: "0=PC端 1=手机",
type: "int",
bind: { key: "读取设备", data: [] },
sort: true,
width: 150,
hidden: true,
align: "left",
},
{ field: "Creator", title: "创建人", type: "string", width: 150, align: "left" },
{
field: "CreateDate",
title: "创建日期",
type: "datetime",
sort: true,
width: 170,
align: "left",
sort: true,
},
{ field: "Modifier", title: "修改人", type: "string", width: 150, align: "left" },
{
field: "ModifyDate",
title: "修改日期",
type: "datetime",
sort: true,
width: 170,
align: "left",
sort: true,
},
{
field: "Other_things",
title: "其他事项",
type: "string",
width: 150,
hidden: true,
align: "left",
},
{
field: "CreateID",
title: "CreateID",
type: "int",
width: 150,
hidden: true,
align: "left",
},
{
field: "ModifyID",
title: "ModifyID",
type: "int",
width: 150,
hidden: true,
align: "left",
},
{
field: "WKInfo_Id",
title: "WKInfo_Id",
type: "bigint",
width: 120,
hidden: true,
readonly: true,
require: true,
align: "left",
},
{
field: "DeptName",
title: "部门名称",
type: "string",
width: 120,
hidden: true,
align: "left",
},
{
field: "PostName",
title: "岗位名称",
type: "string",
width: 120,
hidden: true,
align: "left",
},
],
};
},
methods: {
openDetail(parentPage) {
//parentPage:父页面（1：工作汇报；）;
this.parentPage = parentPage;
//打明细表批量选择
this.detailModel = true;
//刷新表格的数据
this.$nextTick(() => {
this.$refs.detailTable && this.$refs.detailTable.$refs.table.load(null, true);
});
},
async detailSelectClick() {
//回写数据
let rows = this.$refs.detailTable.getSelected();
if (!rows.length) {
ElMessage.error("请选择数据");
return;
}
if (rows.length > 1) {
ElMessage({
type: "error",
message: "只能选择一条数据!",
});
return;
}
//获取回写的字段
this.$emit("parentCall", async ($parent) => {
if (this.parentPage == 1) {
$parent.editFormFields.Rec_User_Id = rows[0].Rec_User_Id.split(",");
$parent.editFormFields.SendUser_Id = rows[0].SendUser_Id + "";
$parent.editFormFields.DeptId = rows[0].DeptId;
$parent.editFormFields.PostId = rows[0].PostId;
$parent.editFormFields.Title = rows[0].Title;
$parent.editFormFields.Type = rows[0].Type + "";
$parent.editFormFields.AttachImgUrl = rows[0].AttachImgUrl;
$parent.editFormFields.AttachFileUrl = rows[0].AttachFileUrl;
$parent.editFormFields.SourceDev = rows[0].SourceDev;
$parent.editFormFields.IsEnable = rows[0].IsEnable;
$parent.editFormFields.Remark = rows[0].Remark;
this.getDetailInfo(rows[0].WKInfo_Id, $parent);
}
this.detailModel = false;
});
},
search() {
//搜索
this.$refs.detailTable.load(null, true);
},
loadBefore(param, callBack) {
//批量选择设置查询条件
param.wheres = [
{ name: "Title", value: this.formFields1.Title, displayType: "like" },
{
name: "Type",
value: this.formFields1.Type,
displayType: "=",
},
{
name: "IsEnable",
value: this.formFields1.IsEnable,
displayType: "=",
},
];
//this.url = "api/ProjectInfo/GetProInfoFromNameOrNumber?inputStr="+this.ProName;
// param.url = "api/ProjectInfo/GetProInfoFromNameOrNumber?inputStr=" + this.ProName;
param.value.type = "2";
callBack(true);
},
rowClick({ row, column, event }) {
// this.$refs.table.$refs.table.clearSelection();//清除当前选中的行
this.$refs.detailTable.$refs.table.toggleRowSelection(row);
},
async getDetailInfo(mainTableId, parent) {
//生成查询条件
let param = {
page: 1,
rows: 30,
sort: "WKInfo_Id",
order: "desc",
wheres: "[]", // 查询条件 ，格式为[{ name: "字段", value: "xx" }]
value: mainTableId,
};
await http.post("/api/WorkReportInfo/getDetailPage", param).then((result) => {
if (result.status == 200) {
if (result.rows.length > 0) {
parent.$refs.detail.rowData = [];
parent.$refs.detail.rowData.unshift(...result.rows);
}
} else {
ElMessage.error("获取汇报明细失败！");
}
});
},
},
};
</script>
<style lang="less" scoped>
.search-form {
display: flex;
padding: 10px;
line-height: 34px;
button {
margin-left: 10px;
}
}
</style>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
