123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- <script>
- import { REFER } from "./api/index";
- export default {
- name: "PopoverTreeSelect",
- props: {
- // v-model
- value: {
- type: [Array, String],
- require: true,
- },
- // 参照类型 ,对应后端
- referName: {
- type: String,
- require: true,
- },
- // 作为 value 唯一标识的键名,绑定值
- valueKey: {
- type: String,
- dafault: () => {
- return "code";
- },
- },
- // 默认查询参数
- queryParams: {
- type: Function,
- default: () => {},
- },
- // 需映射源数据
- source: {
- type: Object,
- default: () => ({}),
- },
- // 参照内外映射
- dataMapping: {
- type: Object,
- default: () => ({}),
- },
- },
- components: {},
- data() {
- return {
- size: "mini",
- width: "50%",
- visible: false,
- loading: false,
- model: {
- search: "",
- isPage: false,
- },
- data: [],
- selectData: [],
- defaultProps: {
- label: "name",
- children: "children",
- },
- };
- },
- computed: {
- innerValue: {
- get() {
- return this.value;
- },
- set(value) {
- this.$emit("input", value);
- },
- },
- },
- watch: {
- innerValue: {
- handler: function (newValue) {
- if (!newValue) {
- const {
- $props: { source, dataMapping },
- } = this;
- for (let key in dataMapping) {
- source[key] = undefined;
- }
- this.$emit("update:source", source);
- }
- },
- },
- // "model.search": {
- // handler: function (newValue) {
- // this.$refs.tree.filter(newValue);
- // },
- // },
- },
- methods: {
- // open dialog
- async open() {
- this.visible = true;
- await this.useReset();
- },
- // hide dialog
- async hide() {
- this.visible = false;
- },
- // fetch list
- async fetchList(prop) {
- try {
- this.loading = true;
- const { referName: type, source, queryParams } = this.$props;
- const { code, rows } = await REFER({
- ...prop,
- ...queryParams(source),
- type: type,
- });
- if (code === 200) {
- this.data = rows;
- }
- } catch (err) {
- // catch
- console.error(err);
- } finally {
- // finally
- this.loading = false;
- }
- },
- // reset list
- async useReset() {
- this.data = [];
- this.model.search = null;
- await this.fetchList(this.model);
- },
- // query list
- async useQuery(value) {
- await this.$refs.tree.filter(value);
- // await this.fetchList(this.model);
- },
- // auto
- async useAutocomplete(prop, cb) {
- if (prop) {
- this.model.search = prop;
- await this.fetchList(this.model);
- await cb(this.data);
- } else {
- cb([]);
- }
- },
- // select
- useSelect(prop) {
- this.selectData = [prop];
- },
- // filter
- useTreeFilter(value, data) {
- if (!value) return true;
- return data.name.indexOf(value) !== -1;
- },
- // confirm
- useConfirm(prop) {
- this.hide();
- const {
- $props: { source, valueKey, dataMapping },
- } = this;
- for (let key in dataMapping) {
- source[key] = prop[0][dataMapping[key]];
- }
- this.innerValue = prop[0][valueKey];
- this.$emit("update:source", source);
- this.$emit("change", prop, this.$props);
- },
- },
- created() {},
- mounted() {},
- destroyed() {},
- };
- </script>
- <template>
- <div class="popover-tree-select">
- <el-autocomplete
- v-bind="$attrs"
- v-model="innerValue"
- :value-key="valueKey"
- :fetch-suggestions="useAutocomplete"
- @select="useConfirm"
- style="width: 100%"
- >
- <i class="el-icon-search" slot="suffix" @click="open"> </i>
- <template slot-scope="{ item }">
- <p
- style="
- text-overflow: ellipsis;
- overflow: hidden;
- line-height: 15px;
- margin: 5px 0;
- "
- >
- {{ item.name }}
- </p>
- <p
- style="
- font-size: 12px;
- color: #b4b4b4;
- line-height: 15px;
- margin: 5px 0;
- "
- >
- {{ item.code }}
- </p>
- </template>
- </el-autocomplete>
- <el-dialog
- :width="width"
- :show-close="false"
- :visible.sync="visible"
- :close-on-click-modal="false"
- :close-on-press-escape="false"
- append-to-body
- >
- <div slot="footer">
- <el-button
- type="primary"
- :size="$attrs.size"
- :loading="loading"
- @click="useConfirm(selectData)"
- >确 认</el-button
- >
- <el-button :size="$attrs.size" :loading="loading" @click="hide"
- >取 消</el-button
- >
-
- </div>
- <el-form
- v-loading="loading"
- :size="size"
- :inline="true"
- :model="model"
- @submit.native.prevent
- >
- <el-form-item prop="search">
- <el-input v-model="model.search" @change="useQuery"> </el-input>
- </el-form-item>
- <el-form-item>
- <el-button icon="el-icon-refresh" @click="useReset"></el-button>
- </el-form-item>
- <el-tree
- v-loading="loading"
- :data="data"
- :props="defaultProps"
- :filter-node-method="useTreeFilter"
- ref="tree"
- accordion
- node-key="id"
- @node-click="useSelect"
- >
- </el-tree>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <style scoped></style>
|