tree-picker組件使用舉例
表格型:
示例圖
點擊查看代碼
<el-form-item label="基礎(chǔ)參數(shù)定義：" :label-width="formLabelWidth" prop="fkCulateParamDef">
<grid-picker :tableColumn="fkCulateParamDefColumn" :modelValue="form"
:nameKeys="{ fromKey: 'culateParamName', toKey: 'fkCulateParamDefName' }"
:valKeys="{ fromKey: 'culateParamCode', toKey: 'fkCulateParamDef' }" onlyKey="culateParamCode" :url="defUrl"
width="100%" @getData="getCheckedData" placeholder="請選擇基礎(chǔ)參數(shù)定義" ref="grid-picker2" />
</el-form-item>
樹形：
點擊查看代碼
<el-form-item v-if="showFormFlag" :label="`${paramsClassName}：`" :label-width="formLabelWidth"
prop="culateParamValue"
:rules="{
required: true, message: '不能為空', trigger: 'change'
}"
>
<tree-picker :strictly="strictly" :treeData="fkOrgTree" v-if="paramsClassName == '機構(gòu)'" ref="fkOrgTreeId"
:defaultProps="fkOrgDefaultProps" treeId="fkOrgTreeId"
:valKeys="{ fromKey: 'branchCode', toKey: 'culateParamValue' }"
:nameKeys="{ fromKey: 'name', toKey: 'culateParamName' }" :show="true" title="請選機構(gòu)" :modelValue="formActive"
@onClick="treePickClick" placeholder="請選機構(gòu)" width="100%">
</tree-picker>
</el-form-item>
this.$set(this.form,'culateParamCode',row.culateParamCode) this.$set(this.form,'culateParamName',row.culateParamName) this.$set(this.form,'fkCulateParamDef',row.culateParamCode) this.$set(this.form,'fkCulateParamDefName',row.culateParamName)
for循環(huán)動態(tài)生成表單
點擊查看代碼
<el-form ref="formActive" :model="formActive" label-width="95px" style="margin-top: 20px;">
<el-form-item v-if="showFormFlag" :label="`${paramsClassName}：`" :label-width="formLabelWidth"
prop="culateParamValue"
:rules="{
required: true, message: '不能為空', trigger: 'change'
}"
>
<tree-picker :strictly="strictly" :treeData="fkOrgTree" v-if="paramsClassName == '機構(gòu)'" ref="fkOrgTreeId"
:defaultProps="fkOrgDefaultProps" treeId="fkOrgTreeId"
:valKeys="{ fromKey: 'branchCode', toKey: 'culateParamValue' }"
:nameKeys="{ fromKey: 'name', toKey: 'culateParamName' }" :show="true" title="請選機構(gòu)" :modelValue="formActive"
@onClick="treePickClick" placeholder="請選機構(gòu)" width="100%">
</tree-picker>
</el-form-item>
<el-form-item :label="`${item.ruleDimName}：`" :label-width="formLabelWidth" :prop="item.filedMapping"
v-for="(item, key) in mbmculateparamdimList"
:rules="{
required: true, message: '不能為空', trigger: 'change'
}"
>
<template v-if="item.filedMapping">
<tree-picker :strictly="strictly" :show="true" :treeData="getTreeData(key)" :ref="`${item.filedMapping}`"
:defaultProps="ActiveProps" :treeId="`${item.filedMapping}`"
:valKeys="{ fromKey: 'id', toKey: `${item.filedMapping?.toLowerCase()}` }"
:nameKeys="{ fromKey: 'name', toKey: `${item.filedMapping?.toLowerCase()}Name` }" title="請選"
:modelValue="formActive" @onClick="getActive(item.ruleDim, `${item.filedMapping}`, key)" placeholder="請選擇"
width="100%" class="showActiveData">
</tree-picker>
</template>
<template v-else>
<div class="warning-message">參數(shù)定義數(shù)據(jù)未配置全，請配置</div>
</template>
</el-form-item>
</el-form>
整個頁面完整代碼
點擊查看代碼
<template>
<div>
<gt-page-table title="基礎(chǔ)測算參數(shù)配置" v-model="showColumn" :table-columns="columns" :total="total"
:page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" style="height: 50vh;">
<template #button>
<!-- <el-select v-model="selectedCorporation" placeholder="選擇法人" @change="onCorporationChange"-->
<!-- style="margin-right: 16px;">-->
<!-- <el-option v-for="corporation in corporationList" :key="corporation.id" :label="corporation.corporationName"-->
<!-- :value="corporation.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
<el-tree-select v-model="selectedCorporation" placeholder="選擇法人" @node-click="onCorporationChange"
:tree-params="corporationParams" style="width:200px" />
<gt-button type="primary" @click="openSynchronization">下發(fā)</gt-button>
<gt-button icon="el-icon-plus" type="add" @click="handleAdd">新增</gt-button>
<!-- <gt-button icon="el-icon-download" type="primary" @click="handleExport">導(dǎo)出</gt-button> -->
</template>
<template #default>
<el-table v-loading="loading" highlight-current-row :data="mbmculateparamsetList" @row-click="getDetails">
<el-table-column align="center" label="序號" type="index" width="60" />
<el-table-column label="基礎(chǔ)參數(shù)定義" align="left" prop="fkCulateParamDef" />
<el-table-column label="版本信息" align="left" prop="pkVersionName" />
<el-table-column label="生效日期" align="left" prop="sDate" />
<el-table-column label="失效日期" align="left" prop="eDate" />
<el-table-column label="創(chuàng)建人" v-if="ifShow('createByName')" align="left" prop="createByName"
show-overflow-tooltip />
<el-table-column label="創(chuàng)建時間" v-if="ifShow('createTime')" align="left" prop="createTime"
show-overflow-tooltip />
<el-table-column label="最后修改人" v-if="ifShow('updateByName')" align="left" prop="updateByName"
show-overflow-tooltip />
<el-table-column label="最后修改時間" v-if="ifShow('updateTime')" align="left" prop="updateTime"
show-overflow-tooltip />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
<template slot-scope="scope">
<gt-button type="text" @click="handleUpdate(scope.row)">修改</gt-button>
<gt-button type="text" @click="handleDelete(scope.row)">刪除</gt-button>
<gt-button type="text" @click="openCopyDialog(scope.row)">復(fù)制</gt-button>
</template>
</el-table-column>
</el-table>
</template>
</gt-page-table>
<gt-page-table title="">
<template #default>
<el-table v-loading="loading" :data="activeTableList" border type="index" height="100%" highlight-current-row
style="width: 100%">
<el-table-column align="center" label="序號" type="index" width="60" />
<el-table-column :label="paramsClassName" align="left" prop="culateParamName" />
<el-table-column :label="item.ruleDimName" align="left" :prop="item.filedMapping?.toLowerCase() + 'Name'"
v-for="item in mbmculateparamdimList" />
<el-table-column label="存量值" header-align="left" align="right" prop="stockVal">
</el-table-column>
<el-table-column label="預(yù)測值" header-align="left" align="right" prop="predictionVal">
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<gt-button type="text" @click="handleUpdateDim(scope.row)">修改</gt-button>
<gt-button type="text" @click="handleDeleteDim(scope.row)">刪除</gt-button>
</template>
</el-table-column>
</el-table>
</template>
</gt-page-table>
<!-- 添加或修改基礎(chǔ)參數(shù)維度設(shè)置對話框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="95px">
<el-form-item label="版本信息：" :label-width="formLabelWidth" prop="pkVersion">
<grid-picker :tableColumn="tableVersionColumn" :modelValue="form"
:nameKeys="{ fromKey: 'versionName', toKey: 'pkVersionName' }"
:valKeys="{ fromKey: 'versionCode', toKey: 'pkVersion' }" onlyKey="versionCode" :url="versionUrl" width="100%"
placeholder="請選擇版本" ref="grid-picker2" @getData="clickHanlder"/>
</el-form-item>
<el-form-item label="生效日期：" prop="sDate">
<el-date-picker v-model="form.sDate" type="date" placeholder="選擇生效日期" style="width: 100% !important"
value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="失效日期：" prop="eDate">
<el-date-picker v-model="form.eDate" type="date" placeholder="選擇失效日期" style="width: 100% !important"
value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="基礎(chǔ)參數(shù)定義：" :label-width="formLabelWidth" prop="fkCulateParamDef">
<grid-picker :tableColumn="fkCulateParamDefColumn" :modelValue="form"
:nameKeys="{ fromKey: 'culateParamName', toKey: 'fkCulateParamDefName' }"
:valKeys="{ fromKey: 'culateParamCode', toKey: 'fkCulateParamDef' }" onlyKey="culateParamCode" :url="defUrl"
width="100%" @getData="getCheckedData" placeholder="請選擇基礎(chǔ)參數(shù)定義" ref="grid-picker2" />
</el-form-item>
</el-form>
<el-form ref="formActive" :model="formActive" label-width="95px" style="margin-top: 20px;">
<el-form-item v-if="showFormFlag" :label="`${paramsClassName}：`" :label-width="formLabelWidth"
prop="culateParamValue"
:rules="{
required: true, message: '不能為空', trigger: 'change'
}"
>
<tree-picker :strictly="strictly" :treeData="fkOrgTree" v-if="paramsClassName == '機構(gòu)'" ref="fkOrgTreeId"
:defaultProps="fkOrgDefaultProps" treeId="fkOrgTreeId"
:valKeys="{ fromKey: 'branchCode', toKey: 'culateParamValue' }"
:nameKeys="{ fromKey: 'name', toKey: 'culateParamName' }" :show="true" title="請選機構(gòu)" :modelValue="formActive"
@onClick="treePickClick" placeholder="請選機構(gòu)" width="100%">
</tree-picker>
<tree-picker :strictly="strictly" :treeData="fkProductTree" v-if="paramsClassName == '產(chǎn)品'" ref="fkProductTreeId"
:defaultProps="fkProductDefaultProps" treeId="fkProductTreeId"
:valKeys="{ fromKey: 'productCode', toKey: 'culateParamValue' }" :show="true"
:nameKeys="{ fromKey: 'productName', toKey: 'culateParamName' }" title="請選產(chǎn)品" :modelValue="formActive"
@onClick="treePickClick" placeholder="請選產(chǎn)品" width="100%">
</tree-picker>
<tree-picker :strictly="strictly" :treeData="lineCodeTree" v-if="paramsClassName == '條線'" ref="lineCodeTreeId"
:defaultProps="lineCodeDefaultProps" treeId="lineCodeTreeId"
:valKeys="{ fromKey: 'lineCode', toKey: 'culateParamValue' }" :show="true"
:nameKeys="{ fromKey: 'name', toKey: 'culateParamName' }" title="請選條線" :modelValue="formActive"
@onClick="treePickClick" placeholder="請選條線" width="100%">
</tree-picker>
</el-form-item>
<el-form-item :label="`${item.ruleDimName}：`" :label-width="formLabelWidth" :prop="item.filedMapping"
v-for="(item, key) in mbmculateparamdimList"
:rules="{
required: true, message: '不能為空', trigger: 'change'
}"
>
<template v-if="item.filedMapping">
<tree-picker :strictly="strictly" :show="true" :treeData="getTreeData(key)" :ref="`${item.filedMapping}`"
:defaultProps="ActiveProps" :treeId="`${item.filedMapping}`"
:valKeys="{ fromKey: 'id', toKey: `${item.filedMapping?.toLowerCase()}` }"
:nameKeys="{ fromKey: 'name', toKey: `${item.filedMapping?.toLowerCase()}Name` }" title="請選"
:modelValue="formActive" @onClick="getActive(item.ruleDim, `${item.filedMapping}`, key)" placeholder="請選擇"
width="100%" class="showActiveData">
</tree-picker>
<!-- <tree-picker style="display: none;" :strictly="strictly" :show="true" :treeData="getTreeData(key)" :ref="`${item.filedMapping}`"
:defaultProps="ActiveProps" :treeId="`${item.filedMapping}`"
:rules="{
required: true, message: '不能為空', trigger: 'change'
}"
:valKeys="{ fromKey: 'id', toKey: `${item.filedMapping.toLowerCase()}` }"
:nameKeys="{ fromKey: 'name', toKey: `${item.filedMapping?.toLowerCase()}Name` }" title="請選"
:modelValue="form" @onClick="getActive(item.ruleDim, `${item.filedMapping}`, key)" placeholder="請選擇"
width="100%">
</tree-picker> -->
</template>
<template v-else>
<div class="warning-message">參數(shù)定義數(shù)據(jù)未配置全，請配置</div>
</template>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">確 定</el-button>
</div>
</el-dialog>
<el-dialog title="同步" :visible.sync="syncVisible" width="500px">
<div style="padding: 10px 20px;">
<gt-search-input v-model="searchInput" placeholder="搜索" @debounced-input="debouncedInputHandle"></gt-search-input>
</div>
<div style="height: 400px; overflow-y: auto;">
<el-tree ref="tree" :data="corporationList" check-strictly="true" show-checkbox node-key="id" :props="corporationProps"
:filter-node-method="filterNode">
</el-tree>
</div>
<span slot="footer" class="dialog-footer">
<gt-button @click="closeSynchronization">取 消</gt-button>
<gt-button type="primary" @click="synchronization">確 定</gt-button>
</span>
</el-dialog>
<!-- 修改參數(shù)規(guī)則對話框 -->
<el-dialog :title="title" :visible.sync="openDim" width="500px" append-to-body>
<el-form ref="formb" :model="formb" :rules="dimRules" label-width="105px">
<el-form-item label="存量值：" prop="stockVal">
<el-input-number v-model="formb.stockVal" :precision="6" :step="0.000001" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="預(yù)測值：" prop="predictionVal">
<el-input-number v-model="formb.predictionVal" :precision="6" :step="0.000001" :min="0"></el-input-number>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitFormDim">確 定</el-button>
</div>
</el-dialog>
<!-- 復(fù)制版本信息的對話框 -->
<el-dialog title="選擇版本" :visible.sync="copyVisible" width="500px">
<div>
<el-checkbox-group v-model="pkVersionList">
<el-checkbox style="display: block;line-height: 30px;" v-for="version in versionList" :key="version.versionCode"
:label="version.versionCode">{{
version.versionName }}</el-checkbox>
</el-checkbox-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="closeCopyDialog">取 消</el-button>
<el-button type="primary" @click="submitCopy">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import utilApi from '@/api/mas/util/util'
import {
listMbmculateparamset, getMbmculateparamset, delMbmculateparamset, synchronization,
addMbmculateparamset, updateMbmculateparamset, getFctDataValById, copy
} from "@/api/mbm/mbmculateparamset/mbmculateparamset";
import {
listMbmculateparamsetb, getMbmculateparamsetb,getSetb,
delMbmculateparamsetb, addMbmculateparamsetb, updateMbmculateparamsetb
} from "@/api/mbm/mbmculateparamset/mbmculateparamsetb";
import {
listMbmculateparamdef,
} from "@/api/mbm/mbmculateparamdef/mbmculateparamdef.js";
import {
listMbmculateparamdim,
} from "@/api/mbm/mbmculateparamdef/mbmculateparamdim";
import {
GetTreeData,
} from "@/api/mas/masproduct/masproduct";
import { getIndustryData } from '@/api/mas/mascust/mascust'
import { listAllCorporation } from "@/api/corporation";
import { mapGetters } from 'vuex';
import GridPicker from '@/views/mas/util/grid-picker.vue';
import treePicker from "@/views/mas/util/tree-picker";
import { queryList } from "@/api/mbm/mbmculateparamdef/mbmculateparamdef";
import SelectDic from "@/views/mas/util/dic_select"; // 源碼位置
import { listVersion } from "@/api/mas/masversion/masversion";
import { GetTreeData as GetLineTreeData } from "@/api/mas/masbusinessline/masbusinessline";
export default {
name: "Mbmculateparamset",
components: {
GridPicker,
treePicker,
SelectDic,
utilApi,
// masBusinessLineApi,
},
data() {
const columns = [
{ label: '基礎(chǔ)參數(shù)定義', prop: 'fkCulateParamDef' },
{ label: '版本信息', prop: 'pkVersion' },
{ label: '生效日期', prop: 'sDate' },
{ label: '失效日期', prop: 'eDate' },
{ label: '最后修改人', prop: 'updateByName' },
{ label: '最后修改時間', prop: 'updateTime' },
{ label: '創(chuàng)建人', prop: 'createByName' },
{ label: '創(chuàng)建時間', prop: 'createTime' },
]
const showColumn = [
'fkCulateParamDef',
'pkVersion',
'sDate',
'eDate',
]
return {
strictly: {
"Y": "s",
"N": "s"
},
columns,
showColumn,
activeTableProp: [],
// 遮罩層
loading: true,
// 選中數(shù)組
ids: [],
// 非單個禁用
single: true,
// 非多個禁用
multiple: true,
// 顯示搜索條件
showSearch: true,
// 總條數(shù)
total: 0,
// 基礎(chǔ)參數(shù)維度設(shè)置表格數(shù)據(jù)
mbmculateparamsetList: [],
// 彈出層標題
title: "",
// 是否顯示彈出層
open: false,
// 查詢參數(shù)
queryParams: {
pageNum: 1,
pageSize: 20,
fkCulateParamDef: null,
pkVersion: null,
sDate: null,
eDate: null,
corporationId: null
},
// 表單參數(shù)
form: {},
// 表單校驗
rules: {
fkCulateParamDef: [
{ required: true, message: "基礎(chǔ)參數(shù)定義不能為空", trigger: "change" }
],
pkVersion: [
{ required: true, message: "版本信息不能為空", trigger: "change" }
],
sDate: [
{ required: true, message: "生效時間不能為空", trigger: "blur" }
],
eDate: [
{ required: true, message: "失效時間不能為空", trigger: "blur" }
],
},
type: '',
selectedCorporation: '',
corporationList: [],
dialogVisible: false,
selectedCorporationsInDialog: [],
selectedCorporations: [],
// 同步彈窗
syncVisible: false,
corporationProps: {
children: 'children',
label: 'corporationName'
},
searchInput: "",
copyVisible: false, // 控制復(fù)制彈窗的顯示
pkVersionList: [], // 存儲選中的版本
versionList: [], // 存儲版本信息列表
formLabelWidth: '100px',
versionUrl: '',
defUrl: '',
fkCulateParamDefColumn: [
{
fieldCode: 'culateParamCode',
fieldName: '參數(shù)編碼',
isShow: true,
query: true,
type: 'input'
},
{
fieldCode: 'culateParamName',
fieldName: '參數(shù)名稱',
isShow: true,
query: true,
type: 'input'
}
],
tableVersionColumn: [
{
fieldCode: 'versionCode',
fieldName: '版本編碼',
isShow: true,
query: true,
type: 'input'
},
{
fieldCode: 'versionName',
fieldName: '版本名稱',
isShow: true,
query: true,
type: 'input'
}
],
mbmculateparamdimList: [],//子表信息
paramsClassName: '',//參數(shù)類型名稱
showFormFlag: false,
ruledimId: '',
fkProductTree: [],
lineCodeTree: [],
fkOrgTree: [],
effPeriodArray: [],
ActiveTreeData: [],
treePickerData: [],
selectSTRid: [],
selectSTR: [],
tableCurColumn: [
{
fieldCode: 'id',
fieldName: '主鍵',
isShow: false
},
{
fieldCode: 'curCode',
fieldName: '幣種編碼',
isShow: true,
query: true,
type: 'input'
},
{
fieldCode: 'curName',
fieldName: '幣種名稱',
isShow: true,
query: true,
type: 'input'
}
],
pickerProps: {
id: 'id',
pid: 'parentId',
name: 'name'
},
fkProductDefaultProps: {
id: 'id',
pid: 'fatherPk',
name: 'name'
},
lineCodeDefaultProps: {
id: 'id',
pid: 'fatherPk',
name: 'name'
},
fkOrgDefaultProps: {
id: 'id',
pid: 'parentId',
name: 'name'
},
ActiveProps: {
id: 'id',
pid: 'pid',
name: 'name'
},
nowCode: '',
nowRefName: '',
nowKey: 0, // 動態(tài)鍵
treeDataSets: [
],
formActive: {},
activeTableList: [],
checkedParamsset: {},//選中的基礎(chǔ)參數(shù)定義
def: '',
formb: {
stockVal: 0,
predictionVal: 0
},
curRow: {},
openDim: false,
dimRules: {
stockVal: [
{ required: true, message: "存量值不能為空", trigger: "blur" },
{ pattern: /^\d{1,4}(\.\d{1,6})?$/, message: '存量值最多為4位整數(shù)和6位小數(shù)', trigger: 'blur' }
],
predictionVal: [
{ required: true, message: "預(yù)測值不能為空", trigger: "blur" },
{ pattern: /^\d{1,4}(\.\d{1,6})?$/, message: '預(yù)測值最多為4位整數(shù)和6位小數(shù)', trigger: 'blur' }
]
},
};
},
async created() {
await this.getCorporationList()
this.getList();
},
computed: {
...mapGetters(['lpOptions', 'sysTypeInfoData',]),
corporationParams() {
return {
clickParent: true,
filterable: false,
leafOnly: false,
includeHalfChecked: false,
data: this.corporationList,
props: {
children: 'children',
label: 'corporationName',
value: 'id',
},
}
},
activetableColumn() {
let fixColumn1_2 = [{ type: 'seq', width: 50 }, { field: 'branchName', title: '機構(gòu)', showHeaderOverflow: true }]
let activeCOLUM = [
{
field: 'culateParamValue',
title: this.paramsClassName,
minWidth: '120px',
showHeaderOverflow: true
}
]
let dynamicsColumns = this.activeTableList ? this.activeTableList.map(item => {
return {
field: item.filedMapping?.toLowerCase(),
title: item.ruleDimName,
minWidth: '120px',
showHeaderOverflow: true
}
}) : [];
let fixColumnLast = [{
field: 'stockVal',
title: '存量值',
fixed: "right",
minWidth: '120px',
editRender: {},
formatter: this.inProportionFormatter,
slots: {
edit: (scope) => {
return [
<gt-input-percentage v-model={scope.row.inProportion} options={{ max: 100, min: 0 }} precision={2} onChange={event => this.inProportionChange(scope)}
/>
]
},
},
}, {
field: 'predictionVal',
title: '預(yù)測值',
fixed: "right",
minWidth: '120px',
editRender: {},
formatter: this.inProportionFormatter,
slots: {
edit: (scope) => {
return [
<gt-input-percentage v-model={scope.row.inProportion} options={{ max: 100, min: 0 }} precision={2} onChange={event => this.inProportionChange(scope)}
/>
]
},
},
}, {
field: '',
title: '操作',
fixed: "right",
minWidth: '120px',
editRender: {},
formatter: this.inProportionFormatter,
slots: {
edit: (scope) => {
return [
]
},
}
}]
return [
...fixColumn1_2,
...activeCOLUM,
...dynamicsColumns,
...fixColumnLast,
]
}
},
watch: {
mbmculateparamdimList: {
handler(newVal, oldVal) {
newVal.map((item, ind) => {
this.getActiveTreeData(item.ruleDim, item.filedMapping, ind)
// console.log("mbmculateparamdimList=", this.mbmculateparamdimList, this.treeDataSets)
})
},
immediate: true,
deep: true
},
treeDataSets: {
handler(newVal, oldVal) {
// console.log("aaaaa", newVal)
},
immediate: true,
},
checkedParamsset: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.$set(this.formActive, 'culateParamValue', '')
this.$set(this.formActive, 'culateParamName', '')
}
}
}
},
mounted() {
},
methods: {
openCopyDialog(row) {
this.pkVersionList = [];
this.fetchVersionList(row);
this.copyVisible = true;
this.pkVersion = row.pkVersion;
this.id = row.id;
this.fkCulateParamDef = row.fkCulateParamDef;
this.sDate = row.sDate;
this.eDate = row.eDate;
},
closeCopyDialog() {
this.copyVisible = false;
},
fetchVersionList(row) {
listVersion({ corporationId: this.selectedCorporation }).then(response => {
this.versionList = response.rows;
});
},
submitCopy() {
// 檢查選中的版本是否包含當前版本
if (this.pkVersionList.includes(this.pkVersion)) {
this.$message.error('選擇要復(fù)制的版本信息不能包含當前版本信息！');
return;
};
const queryParams = {
id: this.id,
pkVersion: this.pkVersion,
pkVersionList: this.pkVersionList,
fkCulateParamDef: this.fkCulateParamDef,
sDate: this.sDate,
eDate: this.eDate,
corporationId: this.selectedCorporation
}
const message =
"確定要復(fù)制選中的測算基礎(chǔ)參數(shù)配置嗎?<p style='color:red'>注意：復(fù)制將會刪除原有配置，請謹慎操作！</>";
this.$confirm(message, "復(fù)制提示", {
dangerouslyUseHTMLString: true,
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "error",
}).then(function () {
return copy(queryParams);
}).then((response) => {
if (response.code === 200) {
this.$message({
message: '復(fù)制成功！',
type: 'success'
});
this.closeCopyDialog();
this.getList();
} else {
this.$message.error('復(fù)制失敗！');
}
});
},
submitFormDim() {
this.$refs["formb"].validate(valid => {
if (valid) {
updateMbmculateparamsetb(this.formb).then(response => {
if (response.code === 200) {
this.$message({
message: '修改成功！',
type: 'success'
});
this.openDim = false;
this.formb = {
stockVal: 0,
predictionVal: 0
}
this.getDetails(this.curRow);
} else {
this.$message.error('修改失敗！');
}
});
// }
}
});
},
handleUpdateDim(row) {
// console.log('handleUpdateDim', row)
const id = row.id || this.ids
this.openDim = true;
this.formb.id = id
this.formb.predictionVal = row.predictionVal
this.formb.stockVal = row.stockVal
this.title = "修改";
},
handleDeleteDim(row) {
const ids = row.id || this.ids;
const message =
"確定要刪除選中的參數(shù)規(guī)則嗎?<p style='color:red'>注意：刪除后將不可恢復(fù)，請謹慎操作！</>";
this.$confirm(message, "刪除提示", {
dangerouslyUseHTMLString: true,
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "error",
})
.then(function () {
return delMbmculateparamsetb(ids);
}).then((response) => {
if (response.data) {
this.getDetails(this.curRow);;
this.$message({
message: '刪除成功！',
type: 'success'
});
} else {
this.msgError("刪除失敗");
}
}).catch(() => { });
},
async getDetails(row) {
this.curRow = row
this.def = row.id
let params = {
fkCulateParamSet: row.id,
corporationId: this.selectedCorporation
}
const paramsClass = await listMbmculateparamdef({ culateParamCode: row.fkCulateParamDef, corporationId: this.selectedCorporation })
let { culateParamType, id } = paramsClass.rows[0]
await listMbmculateparamdim({
fkCulateParamDef: id,
corporationId: this.selectedCorporation
}).then(response => {
this.mbmculateparamdimList = response.rows;
});
this.paramsClassName = this.$getLabel(this.sysTypeInfoData['mas_mbm_culateParamType'], culateParamType)
await listMbmculateparamsetb(params).then(res => {
this.activeTableList = res.rows
})
},
fetchMbmculateparamdim() {
listMbmculateparamsetb({
fkCulateParamDef: this.def,
corporationId: this.selectedCorporation
}).then(response => {
this.mbmculateparamdimList = response.rows;
});
},
activeCellMethod({ row, rowIndex, column, columnIndex }) {
if (this.formStatus === 'view') {
return false
}
if (rowIndex === 0) {
return false
}
return true
},
getTreeData(index) {
return this.treeDataSets[`ActiveTreeData${index}`] || [];
},
handleNodeClick(data) {
},
/*行業(yè)機構(gòu)數(shù)據(jù)*/
getIndustryData() {
getIndustryData().then(res => {
this.treePickerData = res
this.$nextTick(() => {
this.$refs.factorPicker.init()
})
})
},
async getActive(code, refname, key) {
this.nowCode = code,
this.nowRefName = refname
this.nowKey = key
this.$nextTick(() => {
this.$refs[refname][0].init()
})
},
async getActiveTreeData(someId, refname, key) {
this.nowCode = someId,
this.nowRefName = refname
this.nowKey = key
const res = await getFctDataValById(someId, this.selectedCorporation)
let propName = `ActiveTreeData${key}`
this.$set(this.treeDataSets, propName, res)
},
async getCheckedData(row) {
// console.log(row,"8999999999",this.form)
this.$set(this.form,'culateParamCode',row.culateParamCode)
this.$set(this.form,'culateParamName',row.culateParamName)
this.$set(this.form,'fkCulateParamDef',row.culateParamCode)
this.$set(this.form,'fkCulateParamDefName',row.culateParamName)
if (row !== null) {
this.checkedParamsset = row
let { id, culateParamType } = { ...row }
this.showFormFlag = true
this.paramsClassName = this.$getLabel(this.sysTypeInfoData['mas_mbm_culateParamType'], culateParamType)
await listMbmculateparamdim({
fkCulateParamDef: id,
corporationId: this.selectedCorporation
}).then(response => {
this.mbmculateparamdimList = response.rows;
});
} else {
this.showFormFlag = false
this.mbmculateparamdimList = []
}
},
treePickClick() {
if (this.paramsClassName == '機構(gòu)') {
this.getFkOrg()
} else if (this.paramsClassName == '產(chǎn)品') {
this.getProduct()
} else if (this.paramsClassName == '條線') {
this.getLineCode()
}
},
/*獲取產(chǎn)品數(shù)據(jù),調(diào)用公共util下的接口*/
getProduct() {
GetTreeData({ corporationId: this.selectedCorporation }).then(res => {
this.fkProductTree = res;
this.$nextTick(() => {
this.$refs.fkProductTreeId.init()
})
})
},
/*獲取條線數(shù)據(jù),調(diào)用公共util下的接口*/
getLineCode() {
// console.log("masBusinessLineApi", masBusinessLineApi,utilApi);
// masBusinessLineApi.GetTreeData({ corporationId: this.selectedCorporation }).then(res => {
GetLineTreeData({ corporationId: this.selectedCorporation }).then(res => {
this.lineCodeTree = res;
this.$nextTick(() => {
this.$refs.lineCodeTreeId.init()
})
})
},
branchNameChange(item) {
item.name = item.branchName
if (item.children) {
item.children.forEach((item1) => {
item1.name = item1.branchName
this.branchNameChange(item1)
})
}
},
/*獲取機構(gòu)數(shù)據(jù),調(diào)用公共util下的接口*/
getFkOrg() {
utilApi.getAutoOrgData().then(res => {
this.fkOrgTree = res;
this.fkOrgTree.forEach((item) => {
this.branchNameChange(item)
})
this.$nextTick(() => {
this.$refs.fkOrgTreeId.init()
})
})
},
fetchMbmculateparamdim(id, Corporation) {
listMbmculateparamdim({
fkCulateParamDef: id,
corporationId: Corporation
}).then(response => {
this.mbmculateparamdimList = response.rows;
});
},
/*查詢法人列表*/
getCorporationList() {
return listAllCorporation().then(res => {
this.corporationList = res.data
this.selectedCorporation = this.lpOptions[0]?.id
this.versionUrl = "/mas/mas/masversion/list?corporationId=" + this.selectedCorporation;
this.defUrl = "/mas/mbm/mbmculateparamdef/list?corporationId=" + this.selectedCorporation;
})
},
openSynchronization() {
this.syncVisible = true
},
closeSynchronization() {
this.$refs.tree.setCheckedKeys([], false)
this.searchInput = ""
this.debouncedInputHandle("")
this.syncVisible = false
},
synchronization() {
const corporationId = this.selectedCorporation;
const corporationIdList = this.$refs.tree.getCheckedKeys()
const payload = {
corporationId: corporationId,
corporationIdList: corporationIdList
};
synchronization(payload).then(res => {
if (res.code === 200) {
this.$message({
message: '同步成功！',
type: 'success'
});
this.getList(''); // 刷新數(shù)據(jù)
this.closeSynchronization()
} else {
this.$message.error('同步失敗！');
}
});
},
debouncedInputHandle(val) {
this.$refs.tree.filter(val)
},
/** 動態(tài)篩選方法 */
filterNode(value, data) {
if (!value) return true
return `${data.corporationName}`.toLowerCase().indexOf(value.toLowerCase()) !== -1
},
openSyncDialog() {
this.selectedCorporationsInDialog = [...this.selectedCorporations];
this.dialogVisible = true;
},
isCurrentlySelected(corporationId) {
return this.selectedCorporations.includes(corporationId);
},
confirmSelection() {
this.selectedCorporations = [...this.selectedCorporationsInDialog];
// console.log("確認同步法人與ID:", this.selectedCorporations);
this.dialogVisible = false;
},
onCorporationChange() {
this.getList(this.selectedCorporation);
},
/** 查詢基礎(chǔ)參數(shù)維度設(shè)置列表 */
getList() {
this.loading = true;
this.factorDisabled = true;
this.queryParams.corporationId = this.selectedCorporation;
listMbmculateparamset(this.queryParams).then(response => {
this.mbmculateparamsetList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按鈕
cancel() {
this.open = false;
this.openDim = false;
this.reset();
this.$refs.formb.resetFields();
},
clickHanlder(row){
// console.log("clickHanlder=",row)
this.$set(this.form,'pkVersionName',row.versionName)
this.$set(this.form,'pkVersion',row.versionCode)
},
// 表單重置
reset() {
this.form = {
id: '',
pkVersion: '',
pkVersionName: '',
versionName:'',
versionCode:'',
culateParamName:'',
culateParamCode:'',
fkCulateParamDef: '',
fkCulateParamDefName: '',
sDate: '',
eDate: '',
createBy: '',
createTime: '',
updateBy: '',
updateTime: '',
isDeleted: '',
corporationId: '',
};
this.showFormFlag = false
this.mbmculateparamdimList = []
this.formActive = {}
this.resetForm("form");
},
/** 搜索按鈕操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按鈕操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多選框選中數(shù)據(jù)
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按鈕操作 */
handleAdd() {
this.type = "add";
this.reset();
// this.$set(this.form, 'pkVersion', '')
// this.$set(this.form, 'pkVersionName', '')
// this.$set(this.form, 'fkCulateParamDef', '')
// this.$set(this.form, 'fkCulateParamDefName', '')
this.form.eDate = '9999-12-31'; // 設(shè)置默認結(jié)束時間
// console.log('this.form===',this.form,this.formActive)
this.open = true;
this.title = "新增";
},
/** 修改按鈕操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
this.getDetails(this.curRow)
this.form = { ...row }
this.form.pkVersion = row.pkVersion
this.$set(this.form, 'pkVersion', row.pkVersion)
this.$set(this.form, 'pkVersionName', row.pkVersionName)
getSetb({
fkCulateParamDef: this.def,
corporationId: this.selectedCorporation
}).then(response => {
this.formActive = response.rows[0]
// this.$set(this.formActive, 'pkVersionName', row.pkVersionName)
});
// getMbmculateparamset(id).then(response => {
// this.form = response.data;
this.open = true;
this.title = "修改";
if (this.title == "修改") {
this.showFormFlag = true
}
// });
},
/** 提交按鈕 */
submitForm() {
let validA = false
let validB = false
this.$refs["form"].validate(valid => {
if (valid) {
validA = true
}
});
this.$refs["formActive"].validate(valid => {
if (valid) {
validB = true
}
});
if(validA && validB){
this.form.sDate = String(this.form.sDate);
this.form.eDate = String(this.form.eDate);
// 驗證邏輯：檢查失效日期是否晚于生效日期
if (new Date(this.form.sDate) >= new Date(this.form.eDate)) {
this.$message.error('失效日期必須晚于生效日期！');
return;
}
let params = {
...this.form,
paramList: [{ ...this.formActive }]
}
if (this.form.id != null) {
updateMbmculateparamset(params).then(response => {
if (response.code === 200) {
this.$message({
message: '修改成功！',
type: 'success'
});
this.open = false;
this.reset();
this.getList();
} else {
this.$message.error('修改失敗！');
}
});
} else {
this.form.corporationId = this.selectedCorporation;
addMbmculateparamset(params).then(response => {
if (response.code === 200) {
this.$message({
message: '新增成功！',
type: 'success'
});
this.open = false;
this.reset();
this.getList();
} else {
this.$message.error('新增失敗！');
}
});
}
}else if(validA && !validB){
//formActive參數(shù)定義數(shù)據(jù)未配置全，請配置
this.mbmculateparamdimList.map(item=>{
if(item.filedMapping==undefined){
this.$message.warning('基礎(chǔ)測算參數(shù)定義('+item.ruleDimName+')數(shù)據(jù)未配置全，請先去"基礎(chǔ)測算參數(shù)定義"頁面配置');
}
})
}
},
/** 刪除按鈕操作 */
handleDelete(row) {
const ids = row.id || this.ids;
const message =
"確定要刪除選中的測算基礎(chǔ)參數(shù)配置嗎?<p style='color:red'>注意：刪除后將不可恢復(fù)，請謹慎操作！</>";
this.$confirm(message, "刪除提示", {
dangerouslyUseHTMLString: true,
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "error",
})
.then(function () {
return delMbmculateparamset(ids);
}).then((response) => {
if (response.data) {
this.getList();
this.$message({
message: '刪除成功！',
type: 'success'
});
} else {
this.msgError("刪除失敗");
}
}).catch(() => { });
},
/** 導(dǎo)出按鈕操作 */
handleExport() {
this.download('mbmculateparamset/mbmculateparamset/export', {
...this.queryParams
}, `mbmculateparamset_${new Date().getTime()}.xlsx`)
},
// 獲取基礎(chǔ)測算參數(shù)定義
getDefList() {
queryList({ corporationId: this.selectedCorporation }).then(response => {
this.fkCulateParamDefTree = response.data;
});
},
// 是否展示該列
ifShow(prop) {
return this.showColumn.indexOf(prop) > -1
},
// 彈窗關(guān)閉
closedDialog() {
},
}
};
</script>
<style scoped>
.select-corporation {
display: flex;
margin-bottom: 10px;
.gt-button {
margin-left: 10px;
}
}
</style>
grid-picker.vue
點擊查看代碼
<!--
/**
*表格參照事件
@author gientech
@date 2019-04-01
* 調(diào)用示例：
*/
-->
<template >
<div>
<el-input :size="inputSize" v-model="modelValue[nameKeys.toKey]" :style="{ width }" :readonly="readonly"
:disabled="disabled" :placeholder="placeholder">
<i v-if="clearShow" class="el-icon-circle-close el-input__icon" slot="suffix" @click="clearClick">
</i>
<el-button slot="append" size="mini" icon="el-icon-more" :disabled="disabled" v-popover:popover @click="onClick">
</el-button>
</el-input>
<el-popover ref="popover" placement="bottom" @hide="hideClick" :disabled="popoverDisabled" :width="pickerWidth"
trigger="click">
<el-container>
<el-header v-if="search">
<el-form :inline="true" label-suffix="：" >
<el-form-item v-for="(item, index) in searchData" :label="item.name" :key="index" :prop="item.code">
<el-input style="width: 150px" v-if="item.type == 'input'" v-model="item.value"
:placeholder="searchPlaceholder">
</el-input>
<el-date-picker v-else-if="item.type == 'date'" v-model="item.value" value-format="yyyy-MM-dd" type="date"
placeholder="選擇日期" style="width: 180px">
</el-date-picker>
<select-dic :dicCode="item.dicCode" :modelValue="item.value" v-else-if="item.type == 'dic'"
@onChange="onChange" ref="comDic" />
<tree-picker :treeData="treePickerData" v-else-if="item.type == 'picker'" ref="orgPicker" title="組織機構(gòu)"
:modelValue="item.value" placeholder="請選擇組織機構(gòu)" :nameKeys="{ fromKey: 'name', toKey: 'orgParentName' }"
:valKeys="{ fromKey: 'id', toKey: 'branchCode' }" style="width: 200px"
:defaultProps="{ id: 'id', pid: 'parentId', name: 'name' }" treeId="orgTreeList"
@onClick="getFctData" />
</el-form-item>
<el-form-item style="float: right">
<gt-button type="search" @click="onSearch">查詢</gt-button>
</el-form-item>
</el-form>
</el-header>
<el-main :style="`margin-top: ${top}`" >
<el-table max-height="500" :data="tableData" border ref="gridTable" highlight-current-row style="width: 100%"
@row-dblclick="onDblclick" @selection-change="changeFun" size="mini" :row-key="getRowKeys">
<el-table-column v-if="checkBox" align="center" type="selection" width="55" :reserve-selection="true">
</el-table-column>
<el-table-column show-overflow-tooltip v-for="(val, i) in tableColumn" :key="i" :label="val.fieldName"
:prop="val.fieldCode" v-if="val.isShow" :align="textAlign">
</el-table-column>
</el-table>
</el-main>
<el-footer height="10px" v-if="isPage">
<el-row>
<el-col>
<el-pagination style="text-align: center; margin-top: -14px" @size-change="handleSizeChange"
:page-size="pageSize" @current-change="current_change" :current-page="currentPage"
:page-sizes="[5, 15, 20, 25]" :total="total" background small
layout="total,sizes, prev, pager, next, jumper">
</el-pagination>
</el-col>
</el-row>
</el-footer>
</el-container>
<div style="float: right">
<el-button size="mini" v-if="checkBox" @click="onCloseTree">取 消</el-button>
<el-button size="mini" v-if="checkBox" type="primary" @click="setData">確 定</el-button>
</div>
</el-popover>
</div>
</template>
<script>
import utilApi from "@/api/mas/util/util";
import SelectDic from "./dic_select.vue";
import treePicker from "./tree-picker.vue"; // 源碼位置
export default {
components: {
SelectDic,
treePicker,
},
watch: {
defaultChecked(val) {
this.defaultChecked_self = val;
},
value(val) {
this.onlyValue = val;
},
},
props: {
inputSize: {
type: String,
default: 'small'
},
/*pikcer框?qū)挾?/
width: {
type: String,
default: "200px",
},
/*未選擇時顯示的提示信息 */
placeholder: {
type: String,
default: "--請選擇數(shù)據(jù)--",
},
/*數(shù)據(jù)來源對象*/
modelValue: {
type: Object,
},
/*是否只讀*/
readonly: {
type: Boolean,
default: true,
},
/*禁用*/
disabled: {
type: Boolean,
default: false,
},
/*是否分頁*/
isPage: {
type: Boolean,
default: true,
},
/*是否存在查詢條件*/
isSearch: {
type: Boolean,
default: true,
},
/*查詢框提示文字*/
searchPlaceholder: {
type: String,
default: "請輸入查詢條件",
},
/*查詢數(shù)據(jù)路徑*/
url: {
type: String,
default: "",
},
port: {
type: String,
default: 'get',
},
/*參照區(qū)域大小*/
pickerWidth: {
type: String,
default: "750",
},
/*是否顯示復(fù)選框*/
checkBox: {
type: Boolean,
default: false,
},
/*參照要展示的字段*/
tableColumn: {
type: Array,
default: [],
},
/*選中數(shù)據(jù)的唯一標識*/
value: {
type: String,
default: "",
},
/*指定查詢數(shù)據(jù)唯一標識字段*/
onlyKey: {
type: String,
default: "id",
},
/*要返回的value*/
valKeys: {
type: Object,
default: () => {
return {
fromKey: "id",
toKey: "id",
};
},
},
/*要返回的name*/
nameKeys: {
type: Object,
default: () => {
return {
fromKey: "name",
toKey: "name",
};
},
},
/*要返回的擴展數(shù)據(jù)*/
otherKeys: {
type: Object,
default: () => {
return {
fromKey: "",
toKey: "",
};
},
},
/*默認選中第一個*/
defaultFirst: {
type: Boolean,
default: false,
},
/*默認勾選數(shù)據(jù)*/
defaultChecked: {
type: String,
default: "",
},
},
data() {
return {
dialogPickerVisible: false,
nodeData: [],
modelValue_self: this.modelValue,
defaultChecked_self: this.defaultChecked,
pageSize: 5, //每頁的數(shù)據(jù)條數(shù)
currentPage: 1, //默認開始頁面
tableData: [],
total: 0,
search: this.isSearch,
searchFiled: {},
searchData: [],
onlyValue: "",
popoverDisabled: false,
checkRows: [],
treePickerData: [],
};
},
mounted() {
this.searchData = this.getSearchData();
this.currentPage = 1
this.getData({});
},
created: function () { },
methods: {
setTableData(data) {
this.tableData = data
},
getRowKeys(row) {
return row[this.onlyKey];
},
/*
*author gientech
*隱藏時觸發(fā)
*/
hideClick() {
this.currentPage = 1
this.pageSize = 5;
},
getData() {
let queryData = {};
if (this.searchData.length > 0) {
for (let i in this.searchData) {
let data = this.searchData[i];
queryData[data.code] = data.value;
}
}
if (this.tableColumn.length > 0) {
for (let i in this.tableColumn) {
let coloum = this.tableColumn[i];
if (i == 0) {
this.searchFiled = coloum.fieldCode;
} else {
this.searchFiled = this.searchFiled + "," + coloum.fieldCode;
}
}
}
if (this.url) {
utilApi
.getGridData(
queryData,
this.pageSize,
this.currentPage,
this.url,
this.port,
this.searchFiled
)
.then((res) => {
this.tableData = res.rows || [];
this.total = res.total;
this.onlyValue = this.modelValue[this.valKeys.toKey];
/*進行反選操作*/
if (this.checkBox) {
console.log("onlyValue"+this.onlyValue)
if (this.onlyValue != null && this.onlyValue != "") {
if (this.tableData.length > 0) {
let ids = this.onlyValue.split(",");
for (let j in ids) {
let id = ids[j];
for (let i in this.tableData) {
let row = this.tableData[i];
if (row[this.onlyKey] == id) {
this.setCheckRows(row);
}
}
}
}
}
} else {
if (this.onlyValue != null && this.onlyValue != "") {
if (this.tableData.length > 0) {
for (let i in this.tableData) {
let row = this.tableData[i];
if (
row[this.onlyKey] == this.modelValue[this.valKeys.toKey]
) {
this.setCurrentRow(row);
}
}
}
} else {
/*默認選擇第一個*/
if (this.defaultFirst && this.tableData.length > 0) {
this.setCurrentRow(this.tableData[0]);
this.$emit("selectFirst", this.tableData[0]);
}
}
}
});
}
},
handleSizeChange(val) {
this.pageSize = val;
this.getData({});
},
current_change(currentPage) {
this.currentPage = currentPage;
this.getData({});
},
handleNodeClick(node) {
this.nodeData = node;
},
/*確定傳輸選中的數(shù)據(jù)*/
setData(clear) {
this.onCloseTree();
if (clear == true) {
this.checkRows = [];
}
let names;
let ids;
let otherTokeyArr =
this.otherKeys.toKey == "" ? [] : this.otherKeys.toKey.split(",");
let otherFromkeyArr = this.otherKeys.fromKey.split(",");
if (this.checkRows.length > 0) {
for (let i = 0; i < this.checkRows.length; i++) {
if (i == 0) {
names = this.checkRows[i][this.nameKeys.fromKey];
ids = this.checkRows[i][this.valKeys.fromKey];
} else {
names = names + "," + this.checkRows[i][this.nameKeys.fromKey];
ids = ids + "," + this.checkRows[i][this.valKeys.fromKey];
}
}
}
if (otherTokeyArr.length > 0) {
for (let j = 0; j < otherTokeyArr.length; j++) {
let values;
if (this.checkRows.length > 0) {
for (let i = 0; i < this.checkRows.length; i++) {
if (i == 0) {
values = this.checkRows[i][otherFromkeyArr[j]];
} else {
values = values + "," + this.checkRows[i][otherFromkeyArr[j]];
}
}
}
this.$set(this.modelValue_self, otherTokeyArr[j], values);
}
}
this.$set(this.modelValue_self, this.nameKeys.toKey, names);
this.$set(this.modelValue_self, this.valKeys.toKey, ids);
this.onlyValue = ids;
this.$emit("getData", this.checkRows);
},
// 隱藏樹狀菜單
onCloseTree() {
this.$refs.popover.showPopper = false;
},
/*行雙擊事件*/
onDblclick(row) {
if (!this.checkBox) {
if (row === null) {
this.$set(this.modelValue_self, this.nameKeys.toKey, "");
this.$set(this.modelValue_self, this.valKeys.toKey, "");
let otherTokeyArr = this.otherKeys.toKey.split(",");
let otherFromkeyArr = this.otherKeys.fromKey.split(",");
if (otherTokeyArr.length > 0) {
for (let i = 0; i < otherTokeyArr.length; i++) {
this.$set(this.modelValue_self, otherTokeyArr[i], "");
}
}
} else {
this.$set(
this.modelValue_self,
this.nameKeys.toKey,
row[this.nameKeys.fromKey]
);
this.$set(
this.modelValue_self,
this.valKeys.toKey,
row[this.valKeys.fromKey]
);
let otherTokeyArr = this.otherKeys.toKey.split(",");
let otherFromkeyArr = this.otherKeys.fromKey.split(",");
if (otherTokeyArr.length > 0) {
for (let i = 0; i < otherTokeyArr.length; i++) {
this.$set(
this.modelValue_self,
otherTokeyArr[i],
row[otherFromkeyArr[i]]
);
}
}
}
if (row != null) {
this.onlyValue = row[this.onlyKey];
}
this.onCloseTree();
this.$emit("getData", row);
}
},
/*勾選變化事件*/
changeFun(val) {
this.checkRows = val;
},
/*單選時選中行*/
setCurrentRow(row) {
this.$refs.gridTable.setCurrentRow(row);
},
/*勾選已經(jīng)選中的數(shù)據(jù)*/
setCheckRows(row) {
this.$nextTick(() => {
this.$refs.gridTable.toggleRowSelection(row, true);
});
},
/*設(shè)置Table表格表頭樣式*/
getHeaderRowClass({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background:#ECF5FF;color:#614623;text-align:center;font-size:13px;";
} else {
return "";
}
},
/*參照點擊事件*/
onClick() {
let a = true;
let el = this;
this.$emit("onClick", function (flag) {
a = flag;
if (!flag) {
el.popoverDisabled = true;
}
});
if (a) {
el.searchData = el.getSearchData();
el.getData();
el.popoverDisabled = false;
}
},
clearClick() {
if (this.checkBox) {
this.setData(true);
} else {
this.onDblclick(null);
}
},
/*查詢數(shù)據(jù)*/
onSearch() {
this.currentPage = 1;
this.getData();
},
onChange(val) { },
getSearchData() {
let data = [];
if (this.tableColumn.length > 0) {
for (let i in this.tableColumn) {
let coloum = this.tableColumn[i];
let json = {};
if (i == 0) {
this.searchFiled = coloum.fieldCode;
} else {
this.searchFiled = this.searchFiled + "," + coloum.fieldCode;
}
if (coloum.query) {
if (coloum.type) {
json = {
type: coloum.type,
name: coloum.fieldName,
dicCode: coloum.dicCode,
code: coloum.fieldCode,
value: coloum.value || '',
};
data.push(json);
} else {
json = {
type: input,
name: coloum.fieldName,
dicCode: coloum.dicCode,
code: coloum.fieldCode,
value: coloum.value || '',
};
data.push(json);
}
}
}
}
return data;
},
/*獲取組織機構(gòu)數(shù)據(jù),調(diào)用公共util下的接口*/
getFctData() {
utilApi.getAutoOrgData().then((res) => {
this.treePickerData = res;
this.$nextTick(() => {
this.$refs.orgPicker.init();
});
});
},
},
computed: {
treeData_self() {
return this.treeData;
},
top() {
if (this.search) {
return "-35px";
} else {
return "0px";
}
},
clearShow() {
if (
this.modelValue_self[this.nameKeys.toKey] !== undefined &&
this.modelValue_self[this.nameKeys.toKey] != "" &&
this.modelValue_self[this.nameKeys.toKey] != null
) {
if (this.disabled === true) {
return false;
}
return true;
} else {
return false;
}
},
textAlign() {
return 'left';
},
numAlign() {
return 'left';
},
},
};
</script>
<style scoped></style>
tree-picker.vue
點擊查看代碼
<!--
/**
* 參照樹組件
* @author gientech
* @date 2019-04-01
* 調(diào)用示例：
-->
<template>
<div style="width: 100%">
<el-input
v-model="modelValue[nameKeys.toKey]"
:style="{ width }"
class="treePickInput"
:readonly="readonly"
:disabled="disabled"
:placeholder="placeholder"
size="small"
>
<i
v-if="clearShow"
class="el-icon-circle-close el-input__icon"
slot="suffix"
@click="clearClick"
>
</i>
<el-button
slot="append"
icon="el-icon-more"
:disabled="disabled"
v-popover:popover4
@click="onClick"
>
</el-button>
</el-input>
<div id="parent">
<el-popover
ref="popover4"
placement="bottom"
:disabled="popoverDisabled"
width="500px"
trigger="click"
>
<div class="tree" v-if="!popoverDisabled">
<tree-ztree
:treeData="treeData_self"
:ref="treeId"
:treeName="treeId"
:defaultCheckNodes="modelValue_self[valKeys.toKey]"
:casaType="strictly"
@onNodeDbClick="onNodeDbClick"
@onNodeClick="handleNodeClick"
:checkBox="show"
:idFiled="defaultProps.id"
:pidField="defaultProps.pid"
:nameField="defaultProps.name"
></tree-ztree>
</div>
<div style="float: right">
<el-button size="mini" v-if="show" @click="closeData"
>取 消</el-button
>
<el-button size="mini" v-if="show" type="primary" @click="setData()"
>確 定</el-button
>
</div>
</el-popover>
</div>
</div>
</template>
<script>
import treeZtree from "../util/tree-ztree"; // 源碼位置
export default {
name: "treePicker",
components: {
"tree-ztree": treeZtree,
},
props: {
/*picker寬度*/
width: {
type: String,
default: "200px",
},
height: {
type: String,
default: '36px',
},
/*構(gòu)建樹形結(jié)構(gòu)需要的字段標識*/
defaultProps: {
type: Object,
default: () => {
return {
id: "id",
pid: "pid",
name: "name",
};
},
},
/*未選擇數(shù)據(jù)時，提示的文字*/
placeholder: {
type: String,
default: "--請選擇數(shù)據(jù)--",
},
/*數(shù)據(jù)來源對象*/
modelValue: {
type: Object,
},
/*是否只讀*/
readonly: {
type: Boolean,
default: true,
},
/*樹的數(shù)據(jù)*/
treeData: {
type: Array,
default: () => [],
},
/*是否顯示復(fù)選框*/
show: {
type: Boolean,
default: false,
},
/*樹形數(shù)據(jù)的唯一標識字段*/
nodeKey: {
type: String,
default: "id",
},
/*級聯(lián)方式*/
strictly: {
type: Object,
default: () => {
return {
Y: "ps",
N: "ps",
};
},
},
/*是否禁用*/
disabled: {
type: Boolean,
default: false,
},
/*默認勾選數(shù)據(jù)*/
defaultChecked: {
type: String,
default: "",
},
/*當前picker 的id*/
treeId: {
type: String,
default: "pickerTree",
},
/*要返回的value*/
valKeys: {
type: Object,
default: () => {
return {
fromKey: "id",
toKey: "id",
};
},
},
/*要返回的name*/
nameKeys: {
type: Object,
default: () => {
return {
fromKey: "name",
toKey: "name",
};
},
},
/*要返回的擴展數(shù)據(jù)*/
otherKeys: {
type: Object,
default: () => {
return {
fromKey: '',
toKey: '',
};
},
},
},
data() {
return {
queryName: '',
nodeData: [],
aaa: "",
modelValue_self: this.modelValue,
defaultChecked_self: this.defaultChecked,
popoverDisabled: false,
loading: "",
// clearShow:false,
};
},
watch: {
defaultChecked(val) {
this.defaultChecked_self = val;
},
},
methods: {
init() {
this.$nextTick(() => {
this.$refs[this.treeId].initTreeNew();
});
},
/*動態(tài)構(gòu)建的時候初始化的方法*/
initTreeByActive(data) {},
handleNodeClick(node) {
this.nodeData = node;
},
closeData() {
this.onCloseTree();
},
setData(clear) {
let el = this;
/*是判斷是多選還是單選*/
if (this.show) {
let nodes = this.$refs[this.treeId].getCheckNodes();
// 新增wyn
this.$emit("checked-datas", {
CheckedNodes: nodes,
treeId: this.$refs[this.treeId].treeName,
});
// 新增結(jié)束
if (clear == true) {
nodes = [];
}
let names = "";
let ids = "";
let otherTokeyArr =
this.otherKeys.toKey == "" ? [] : this.otherKeys.toKey?.split(",");
let otherFromkeyArr = this.otherKeys.fromKey?.split(",");
if (nodes.length > 0) {
let j = 0;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i][this.valKeys.fromKey] != "ROOT") {
if (j == 0) {
names = nodes[i][this.nameKeys.fromKey];
ids = nodes[i][this.valKeys.fromKey];
} else {
names = names + "," + nodes[i][this.nameKeys.fromKey];
ids = ids + "," + nodes[i][this.valKeys.fromKey];
}
j++;
}
}
}
if (otherTokeyArr.length > 0) {
for (let j = 0; j < otherTokeyArr.length; j++) {
let values = "";
if (nodes.length > 0) {
for (let i = 0; i < nodes.length; i++) {
if (i == 0) {
values = nodes[i][otherFromkeyArr[j]];
} else {
values = values + "," + nodes[i][otherFromkeyArr[j]];
}
}
}
// this.$set(this.modelValue_self, otherTokeyArr[j], values);
this.$set(this.modelValue, otherTokeyArr[j], values);
}
}
// this.$set(this.modelValue_self, this.nameKeys.toKey, names);
// this.$set(this.modelValue_self, this.valKeys.toKey, ids);
this.$set(this.modelValue, this.nameKeys.toKey, names);
this.$set(this.modelValue, this.valKeys.toKey, ids);
this.$emit("refreshDataList", nodes);
this.onCloseTree();
}
},
// 隱藏樹狀菜單
onCloseTree() {
this.$refs.popover4.showPopper = false;
},
onNodeDbClick(data) {
if (!this.show) {
//判斷當前選中節(jié)點是否為根節(jié)點
if (data != undefined && data != null) {
if (data[this.defaultProps.id] === "ROOT") {
this.$message({
message: "根節(jié)點不允許選擇！",
type: "warning",
});
} else {
this.$set(
this.modelValue,
this.nameKeys.toKey,
data[
this.nameKeys.fromKey == ""
? this.defaultProps.name
: this.nameKeys.fromKey
] === undefined
? ""
: data[
this.nameKeys.fromKey == ""
? this.defaultProps.name
: this.nameKeys.fromKey
]
);
this.$set(
this.modelValue,
this.valKeys.toKey,
data[
this.valKeys.fromKey == ""
? this.defaultProps.id
: this.valKeys.fromKey
] === undefined
? ""
: data[
this.valKeys.fromKey == ""
? this.defaultProps.id
: this.valKeys.fromKey
]
);
let otherTokeyArr = this.otherKeys.toKey ==''? [] : this.otherKeys.toKey?.split(",");
let otherFromkeyArr = this.otherKeys.fromKey?.split(",");
if (otherTokeyArr&&otherTokeyArr.length>0) {
for (let i = 0; i < otherTokeyArr.length; i++) {
if (data[otherFromkeyArr[i]]) {
this.$set(
this.modelValue,
otherTokeyArr[i],
data[otherFromkeyArr[i]] === undefined
? ""
: data[otherFromkeyArr[i]]
);
} else {
this.$set(this.modelValue, otherTokeyArr[i], "");
}
}
}
this.onCloseTree();
this.$emit("refreshDataList", data);
}
} else {
this.$message({
message: "請選擇一條數(shù)據(jù)！",
type: "warning",
});
}
}
},
onClick() {
this.nodeData = [];
let el = this;
let a = true;
this.$emit("onClick", function (flag) {
a = flag;
if (!flag) {
el.popoverDisabled = true;
}
});
if (a) {
el.popoverDisabled = false;
}
},
clearClick() {
if (this.show) {
this.setData(true);
} else {
this.onNodeDbClick({});
}
},
},
computed: {
treeData_self() {
console.log('this.treeData=',this.treeData,typeof(this.treeData),this.treeData instanceof Array)
return this.treeData;
},
clearShow() {
if (
this.modelValue_self[this.nameKeys.toKey] !== undefined &&
this.modelValue_self[this.nameKeys.toKey] != "" &&
this.modelValue_self[this.nameKeys.toKey] != null
) {
if (this.disabled === true) {
return false;
}
return true;
} else {
return false;
}
},
},
};
</script>
<style scoped>
.tree {
overflow-y: auto;
overflow-x: hidden;
width: 100%;
height: 300px;
}
</style>
浙公網(wǎng)安備 33010602011771號