<template>
<div>
<!-- 品名统计-->
<div class="searchBox" v-if="dataType == 'staName'">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="品名" prop="staName">
<el-input size="small" v-model="queryParams.staName" placeholder="请输入品名"></el-input>
</el-form-item>
<el-form-item label="类别" prop="category">
<el-select size="small" v-model="queryParams.category" filterable clearable placeholder="请选择">
<el-option
v-for="item in categoryList"
:key="item.dictCode"
:label="item.dictLabel"
:value="item.dictCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="searchBox" v-else-if="dataType == 'deptName'">
<el-form :model="queryParamsDept" ref="queryForm" :inline="true">
<el-form-item label="二级单位" prop="category">
<el-input size="small" v-model="queryParamsDept.deptName" placeholder="请输入二级单位"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="" v-if="dataType == 'staName'">
<a-transfer :data-source="sourceData" :target-keys="targetKeys" :show-select-all="false" :locale="{itemUnit: '项', itemsUnit: '项',}" @change="onChange" :rowKey="record => record.staName">
<template slot="children" slot-scope="{
props: { direction, filteredItems, selectedKeys },
on: { itemSelectAll, itemSelect },
}"
>
<a-table
bordered
:row-selection="getRowSelection({ selectedKeys, itemSelectAll, itemSelect })"
:columns="direction === 'left' ? leftColumns : rightColumns"
rowKey="staName"
:locale="{emptyText: '暂无数据'}"
:data-source="filteredItems"
size="small"
:custom-row="
({ staName }) => ({
on: {
click: () => {
itemSelect(staName, !selectedKeys.includes(staName));
},
},
})
"
/>
</template>
</a-transfer>
</div>
<div class="" v-else-if="dataType == 'deptName'">
<a-transfer :data-source="sourceData" :target-keys="targetKeys" :show-select-all="false" :locale="{itemUnit: '项', itemsUnit: '项',}" @change="onChange" :rowKey="record => record.deptId">
<template slot="children" slot-scope="{
props: { direction, filteredItems, selectedKeys },
on: { itemSelectAll, itemSelect },
}"
>
<a-table
bordered
:row-selection="getRowSelectionDept({ selectedKeys, itemSelectAll, itemSelect })"
:columns="direction === 'left' ? leftColumns : rightColumns"
rowKey="deptId"
:locale="{emptyText: '暂无数据'}"
:data-source="filteredItems"
size="small"
:custom-row="
({ deptId }) => ({
on: {
click: () => {
itemSelect(deptId, !selectedKeys.includes(deptId));
},
},
})
"
/>
</template>
</a-transfer>
</div>
<div class="box demo-drawer__footer">
<el-button type="primary" @click="submit">确 定</el-button>
<el-button @click="cancelSubmit">取 消</el-button>
</div>
</div>
</template>
<script>
import request from '@/utils/request'
import { getDicts } from "@/api/chemicals/stander";
export default {
name: "setting",
props:{
// dataType的值 (staName:品名对应数据表 deptName:二级单位对应数据表)
dataType:{
type:String,
required:true,
default: ''
},
staUrl: {
type:String,
},
deptUrl: {
type:String,
},
//穿梭框右侧选中的集合
targetKeys:{
type:Array,
required: false,
default: []
},
},
data(){
return {
sourceData:[],//统计图设置---表格所有数据,(所有要显示的数据 key必须时字符串)
leftColumns: [],//左侧表格显示头
rightColumns: [],//右侧表格显示头
//搜索
queryParams:{
staName:null,
category:null,
},
queryParamsDept:{
deptName:null
},
categoryList:[],//分类列表
nextTargetKeys:[],//穿梭后右侧数据的key集合
}
},
created() {
this.getCategory();
this.getList();
let tableColumns = [];
if(this.dataType == 'staName'){
tableColumns = [
{
dataIndex: 'categoryName',
title: '类别',
ellipsis: true,
},
{
dataIndex: 'staName',
title: '品名',
ellipsis: true,
},
];
}else if(this.dataType == 'deptName'){
tableColumns = [
{
dataIndex: 'deptName',
title: '二级单位',
ellipsis: true,
},
];
}
this.leftColumns = tableColumns;
this.rightColumns = tableColumns;
},
methods:{
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
if(this.dataType == 'staName'){
this.queryParams = {
staName:null,
category:null,
}
}else if(this.dataType == 'deptName'){
this.queryParamsDept = {
deptName:null
}
}
this.handleQuery();
},
//获取表格数据
getList(){
//品名
if(this.dataType == 'staName'){
this.sourceData = [];
request({
url: this.staUrl,
method: 'get',
params: this.queryParams
}).then(response =>{
this.sourceData = response.data;
})
}else if(this.dataType == 'deptName'){
this.getHaveDeptNameList();
}
},
//获取类别列表
getCategory(){
this.sourceData = [];
getDicts("standard_category").then(res=>{
let data = res.data
data.forEach(item=>{
let obj={}
obj.dictLabel= item.dictLabel
obj.dictCode=item.dictValue
this.categoryList.push(obj)
})
})
},
//获取二级单位列表
getHaveDeptNameList(){
this.sourceData = [];
request({
url: this.deptUrl,
method: 'get',
params: this.queryParamsDept
}).then((res) => {
let data = res.data;
data.forEach((item) => {
let obj = {};
obj.deptId = item.deptId;
obj.deptName = item.deptName;
this.sourceData.push(obj);
});
});
},
//穿梭框数据变化时
onChange(nextTargetKeys) {
this.nextTargetKeys = nextTargetKeys;
this.$emit('changeTargetKeys',nextTargetKeys)
},
//提交设置的数据
submit(){
// TODO 更新统计图显示内容
this.$emit('updateEcharts',this.nextTargetKeys);
this.$emit('close',false)
},
//取消提交
cancelSubmit() {
this.$emit('close',false)
},
//复选框勾选---品名
getRowSelection({ selectedKeys, itemSelectAll, itemSelect }) {
return {
onSelectAll(selected, selectedRows) {
const treeSelectedKeys = selectedRows.map(({ staName }) => staName);
const diffKeys = selected ? treeSelectedKeys : selectedKeys;
itemSelectAll(diffKeys, selected);
},
onSelect({ staName }, selected) {
itemSelect(staName, selected);
},
selectedRowKeys: selectedKeys,
};
},
//复选框勾选---二级单位
getRowSelectionDept({ selectedKeys, itemSelectAll, itemSelect }) {
return {
onSelectAll(selected, selectedRows) {
const treeSelectedKeys = selectedRows.map(({ deptId }) => deptId);
const diffKeys = selected ? treeSelectedKeys : selectedKeys;
itemSelectAll(diffKeys, selected);
},
onSelect({ deptId }, selected) {
itemSelect(deptId, selected);
},
selectedRowKeys: selectedKeys,
};
},
}
}
</script>
<style scoped lang="scss">
::v-deep {
.ant-btn-icon-only.ant-btn-sm {
border-radius: 50%;
width: 44px;
height: 44px;
}
.ant-transfer-operation .ant-btn .anticon {
font-size: 16px;
}
.ant-transfer-operation .ant-btn:first-child {
margin-bottom: 10px;
}
.demo-drawer__footer {
text-align: center;
}
.ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
background-color: #fff;
}
.ant-transfer-customize-list .ant-transfer-list-body-customize-wrapper, .ant-transfer-list {
background-color: #fff;
border: none;
min-height: 500px;
margin-bottom: 10px;
}
.ant-transfer-list-header {
height: 0;
padding: 0;
display: none;
}
.ant-transfer-list {
padding-top: 0;
max-width: 50%;
}
.ant-transfer-customize-list .ant-table-wrapper .ant-table-small {
border-top: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
}
.ant-table-small.ant-table-bordered .ant-table-placeholder {
border-bottom: 1px solid #e8e8e8;
}
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
display: none;
}
.ant-checkbox-indeterminate .ant-checkbox-inner{
background-color: #1890ff;
border-color: #1890ff;
}
.ant-checkbox-indeterminate .ant-checkbox-inner::before {
content: "";
position: absolute;
display: block;
background-color: #FFFFFF;
height: 2px;
transform: scale(0.5);
left: 0;
right: 0;
top: 6px;
}
}
.box {
position: relative;
background-color: #fff;
border-radius: 4px;
margin-bottom: 10px;
padding: 20px;
}
.searchBox {
margin-bottom: 10px;
}
</style>