<template>
<div>
<a-row :gutter="20">
<c-search-panel :columns="main.columns" @search="onSearch"></c-search-panel>
<a-col :
span="10">
<v-table
filled
highlight-current-row
:dataSource="main.dataSource"
:columns="main.columns"
:pagination="main.pagination"
:toolbar="main.toolbar"
:proxy-config="main.proxyConfig"
@cell-click="onMainCellClick"
@toolbar-button-click="onToolbarClick"
:sort-config="main.sortConfig"
ref="mainTable"
></v-table>
</a-col>
<a-col :
span="14">
<v-table
filled
:dataSource="secondary.dataSource"
:columns="secondary.columns"
:pagination="secondary.pagination"
:toolbar="secondary.toolbar"
:proxy-config="secondary.proxyConfig"
@toolbar-button-click="onSecondaryToolbarClick"
:sort-config="secondary.sortConfig"
ref="secondaryTable"
></v-table>
</a-col>
</a-row>
</div>
</template>
<script>
import { fileSaver } from "@/utils";
import { toLine } from "~/utils/dataUtils";
import { getMajorBaseDropList } from "@/api/modules/newQc/inspect/proj/info/index.js";
import {
getQaDeptBases,
putQaDeptBases,
deleteQaDeptBases,
getQaDeptPersonBases,
putQaDeptPersonBases,
deleteQaDeptPersonBases,
exportQaDeptPersonBases,
importQaDeptPersonBasesAndExport,
exportQaDeptPersonBasesTemplates,
findUserCode,
} from "@/api/modules/newQc/deptBase/index.js";
export default {
data() {
return {
main: {
sortConfig: { defaultSort: { field: "createDate", order: "desc" } },
dataSource: undefined,
columns: [
{ dataIndex: "selection", type: "checkbox", align: "center", fixed: "left", width: 50 },
{
dataIndex: "projNo",
title: "项目",
type: "project",
condition: true,
editable: true,
rules: [{ required: true }],
width: 120,
},
// {
// dataIndex: "deptNo",
// title: "部门代码",
// condition: true,
// editable: true,
// rules: [{ required: true }],
// width: 140,
// },
{
dataIndex: "deptNo",
title: "部门信息",
condition: true,
editable: true,
rules: [{ required: true }],
type: 'organization',
options: {
fieldNames: {
label: "name",
value: "number",
},
},
//VTable
onChange: ({row, deptInfo}) => {
row.deptName = deptInfo.name;
row.deptNo = deptInfo.number;
},
formatter: ({row}) => (row.deptName ? `${row.deptName}(${row.deptNo})` : ''),
},
],
pagination: { total: 0 },
toolbar: {
buttons: [
{
code: "insert",
name: "新增",
resource: [{ url: "/service-qc/qa/dept/base", method: "PUT" }],
},
{
code: "save",
name: "保存",
resource: [{ url: "/service-qc/qa/dept/base", method: "PUT" }],
},
{
code: "delete",
//name: "删除",
name: this.$t("crud.remove"),
resource: [{ url: "/service-qc/qa/dept/base", method: "DELETE" }],
},
],
},
proxyConfig: {
autoLoad: false,
ajax: {
query: (pagination, ...args) => this.onMainTableQuery(pagination, args),
save: ({ body }) => this.onMainTableSave(body),
delete: ({ body }) => this.onMainTableDelete(body),
},
},
},
secondary: {
sortConfig: { defaultSort: { field: "createDate", order: "desc" } },
dataSource: undefined,
columns: [
{ dataIndex: "selection", type: "checkbox", width: 50 },
{
dataIndex: "code",
title: "账号",
editable: true,
rules: [{ required: true }],
width: 140,
onChange: ({ row, value }) => {
// 根据业务逻辑生成 email
console.log('asasas')
}
},
{
dataIndex: "name",
title: "姓名",
editable: true,
rules: [{ required: true }],
width: 120,
},
{
dataIndex: "phoneNo",
title: "手机",
editable: true,
rules: [{ required: true }],
width: 120,
},
{ dataIndex: "email", title: "邮箱", editable: true, width: 200 ,rules: [{ required: true }]},
{ dataIndex: "telNo", title: "电话", editable: true, width: 120 },
],
pagination: { total: 0 },
toolbar: {
buttons: [
{
code: "add",
name: "新增",
resource: [{ url: "/service-qc/qa/dept/person/base", method: "PUT" }],
},
{
code: "save",
name: "保存",
resource: [{ url: "/service-qc/qa/dept/person/base", method: "PUT" }],
},
{
code: "delete",
//name: "删除",
name: this.$t("crud.remove"),
resource: [{ url: "/service-qc/qa/dept/person/base", method: "DELETE" }],
},
{
code: "template",
name: "模板",
resource: [
{ url: "/service-qc/qa/dept/person/base/excels/templates", method: "GET" },
],
},
{
code: "importAndUploadData",
name: "导入",
resource: [{ url: "/service-qc/qa/dept/person/base/excels", method: "POST" }],
},
{
code: "exportData",
name: "导出",
resource: [{ url: "/service-qc/qa/dept/person/base/excels", method: "GET" }],
},
],
},
proxyConfig: {
autoLoad: false,
ajax: {
query: (pagination, ...args) => this.onSecondaryTableQuery(pagination, args),
save: ({ body }) => this.onSecondaryTableSave(body),
delete: ({ body }) => this.onSecondaryTableDelete(body),
},
},
},
currentRow: undefined,
currentKeyword: undefined,
};
},
computed: {
mainTable() {
return this.$refs.mainTable.getTable();
},
secondaryTable() {
return this.$refs.secondaryTable.getTable();
},
},
methods: {
onSearch(value) {
this.currentKeyword = value;
this.mainTable.commitProxy("query");
},
onMainCellClick(cell, event) {
if (
(!this.currentRow && (cell.row.id + "").indexOf("row") == -1 && Number(cell.row.id) > 0) ||
((cell.row.id + "").indexOf("row") == -1 &&
Number(cell.row.id) > 0 &&
this.currentRow.id != cell.row.id)
) {
this.currentRow = cell.row;
this.secondaryTable.commitProxy("query");
}
},
onMainTableQuery(pagination, args) {
let sort = pagination.sort;
let sorter = "";
if (sort && sort.field && sort.order) {
sorter = toLine(sort.field) + "," + sort.order;
} else {
sorter = "createDate,desc";
}
const parameters = this.$vtable.pagination(
pagination.page,
pagination.sort,
pagination.filters,
args,
);
return getQaDeptBases({ ...parameters, sort: sorter, ...this.currentKeyword });
},
onMainTableSave(body) {
return putQaDeptBases(
body.updateRecords.concat(
body.insertRecords && body.insertRecords.length
? body.insertRecords.map(x => {
x["id"] = undefined;
return x;
})
: body.insertRecords,
),
);
},
onMainTableDelete(body) {
return deleteQaDeptBases(body.removeRecords.map(x => x["id"]));
},
//toolbar
onToolbarClick(target) {},
onSecondaryTableQuery(pagination, args) {
const parameters = this.$vtable.pagination(
pagination.page,
pagination.sort,
pagination.filters,
args,
);
var par = { deptId: this.currentRow.id };
return getQaDeptPersonBases({ ...parameters, ...par });
},
onSecondaryTableSave(body) {
if (this.currentRow && this.currentRow.id) {
return putQaDeptPersonBases(
body.updateRecords.concat(
body.insertRecords && body.insertRecords.length
? body.insertRecords.map(x => {
x["id"] = undefined;
x["deptId"] = this.currentRow.id;
return x;
})
: body.insertRecords,
),
);
} else {
this.$message.error("请选择左侧部门");
}
},
onSecondaryTableDelete(body) {
return deleteQaDeptPersonBases(body.removeRecords.map(x => x["id"]));
},
//toolbar
onSecondaryToolbarClick(target) {
const fileName = "QC责任部门及人员信息.xlsx";
switch (target.code) {
case "add":
if (
this.currentRow &&
this.currentRow.id &&
(this.currentRow.id + "").indexOf("row") == -1
) {
this.secondaryTable.insert();
} else {
this.$message.error("请先保存左侧部门");
}
break;
case "exportData":
exportQaDeptPersonBases(this.currentKeyword).then(response => {
fileSaver.saveAs(response.data, fileName);
});
break;
case "importAndUploadData":
this.secondaryTable.readFile({ types: ["xlsx", "xls"] }).then(response => {
const { files } = response;
if (files.length < 1) return;
importQaDeptPersonBasesAndExport(files[0]).then(response => {
if (response.data.size > 0) {
this.$message.error("上传失败，请查看错误文件");
fileSaver.saveAs(response.data, fileName);
} else {
//this.$message.success("上传成功！");
this.$message.success(this.$t("pipeControll.common.uploadSuccess"));
}
});
});
break;
case "template":
exportQaDeptPersonBasesTemplates({}).then(response => {
fileSaver.saveAs(response.data, fileName);
});
break;
default:
break;
}
},
},
mounted() {},
};
</script>
<style scoped>
.c-input-search {
margin: 8px 0 10px 0;
}
</style> { dataIndex: "code", title: "账号", editable: true, rules: [{ required: true }], width: 140, }, 输入值后调用方法给{ dataIndex: "email", title: "邮箱", editable: true, width: 200 ,rules: [{ required: true }]},
赋值用插槽方式
本文介绍了一个简单的jQuery代码片段，展示了如何使用jQuery来修改HTML元素的内容。通过一个具体的例子，即用'xxx'替换指定ID(#spName)对应的元素内容，帮助读者快速理解jQuery的基本操作。
扫一扫
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
