|
|
@@ -0,0 +1,370 @@
|
|
|
+<template>
|
|
|
+ <!-- 中文下拉 -->
|
|
|
+ <div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-select
|
|
|
+ ref="mySelect"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="value"
|
|
|
+ @input="inputChange"
|
|
|
+ :placeholder="'请选择 ' + placeholder"
|
|
|
+ @change="selectChange"
|
|
|
+ @clear="clear"
|
|
|
+ :clearable="clearable"
|
|
|
+ :multiple="multiple"
|
|
|
+ :filterable="filterable"
|
|
|
+ :remote="remote"
|
|
|
+ :remote-method="remoteMethod"
|
|
|
+ :loading="loading"
|
|
|
+ :size="size"
|
|
|
+ :disabled="disabled"
|
|
|
+ :collapse-tags="collapseTags"
|
|
|
+ @visible-change="visibleChange"
|
|
|
+ :allow-create="allowCreate"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in options"
|
|
|
+ :label="item[label]"
|
|
|
+ :value="item[keyValue ? keyValue : label]"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ <span v-if="slotRight" style="float: left">{{ item[label] }}</span>
|
|
|
+ <span
|
|
|
+ v-if="slotRight"
|
|
|
+ style="
|
|
|
+ float: right;
|
|
|
+ color: #8492a6;
|
|
|
+ font-size: 13px;
|
|
|
+ max-width: 200px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ "
|
|
|
+ >{{ item[rightLabel] }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="diySlot"
|
|
|
+ style="
|
|
|
+ float: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ "
|
|
|
+ :style="{ 'max-width': selectWidth - 30 + 'px' }"
|
|
|
+ >{{ item[label] }}</span
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getDicinit } from "@/api/dicSelect/index";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: [],
|
|
|
+ loading: false,
|
|
|
+ data: {},
|
|
|
+ form: {},
|
|
|
+ query: {},
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ selectionList: [],
|
|
|
+ selectWidth: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ activateCreated: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ slotRight: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ diySlot: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ rightLabel: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ keyValue: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ res: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default: "请输入",
|
|
|
+ },
|
|
|
+ clearable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ method: {
|
|
|
+ type: String,
|
|
|
+ default: "GET",
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ dataName: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ filterable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ remote: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ type: String,
|
|
|
+ default: "small",
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ searchShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ treeShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ mockData: {
|
|
|
+ type: Array,
|
|
|
+ default: function () {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ collapseTags: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ default: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ defaultValue: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ disabledLabel: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ dataType: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ multipleStrings: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ allowCreate: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ initData: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: "value",
|
|
|
+ event: "selectedValue",
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ if (this.activateCreated) {
|
|
|
+ if (this.initData) {
|
|
|
+ this.getDicData();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.options = this.mockData;
|
|
|
+ }
|
|
|
+ if (this.diySlot) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.selectWidth = this.$refs.mySelect.$el.offsetWidth;
|
|
|
+ this.$refs.mySelect.$el.querySelector(
|
|
|
+ ".el-select-dropdown"
|
|
|
+ ).style.width = `${this.selectWidth}px`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ if (this.dataType == "string") {
|
|
|
+ if (val) {
|
|
|
+ if (typeof val == "string") {
|
|
|
+ this.value = val.split(",");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.value = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * @param {any} status
|
|
|
+ */
|
|
|
+ visibleChange(status) {
|
|
|
+ if (status) {
|
|
|
+ if (this.options.length == 0) {
|
|
|
+ this.data = {};
|
|
|
+ this.getDicData();
|
|
|
+ }
|
|
|
+ this.$emit("visibleChange");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ inputChange() {
|
|
|
+ if (this.dataType == "string") {
|
|
|
+ if (this.value && this.value.length) {
|
|
|
+ this.$emit("selectedValue", this.value.join(","));
|
|
|
+ } else {
|
|
|
+ this.$emit("selectedValue", null);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$emit("selectedValue", this.value);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {string} query
|
|
|
+ */
|
|
|
+ remoteMethod(query) {
|
|
|
+ if (query !== "") {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.data[this.dataName] = query;
|
|
|
+ this.getDicData();
|
|
|
+ }, 200);
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.data = this.$options.data().data;
|
|
|
+ this.getDicData();
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDicData() {
|
|
|
+ if (this.url) {
|
|
|
+ this.loading = true;
|
|
|
+ this.data.pageNum = 1;
|
|
|
+ this.data.pageSize = 10;
|
|
|
+ getDicinit(this.method, this.url, this.data)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res, 11111111);
|
|
|
+ if (this.res) {
|
|
|
+ res.rows.forEach((e) => {
|
|
|
+ if (
|
|
|
+ this.disabledLabel
|
|
|
+ .split(",")
|
|
|
+ .some((item) => item == e[this.label])
|
|
|
+ ) {
|
|
|
+ e.disabled = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.options = res.rows;
|
|
|
+ } else {
|
|
|
+ res.rows.forEach((e) => {
|
|
|
+ if (
|
|
|
+ this.disabledLabel
|
|
|
+ .split(",")
|
|
|
+ .some((item) => item == e[this.label])
|
|
|
+ ) {
|
|
|
+ e.disabled = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.options = res.rows;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.options = this.mockData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {any} data
|
|
|
+ */
|
|
|
+ IdGetDicData(data) {
|
|
|
+ this.loading = true;
|
|
|
+ getDicinit(this.method, this.url, data)
|
|
|
+ .then((res) => {
|
|
|
+ if (this.res) {
|
|
|
+ this.options = res.rows;
|
|
|
+ } else {
|
|
|
+ this.options = res.rows;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @param {any[]} row
|
|
|
+ */
|
|
|
+ selectChange(row) {
|
|
|
+ console.log(row);
|
|
|
+ this.options.forEach((e) => {
|
|
|
+ if (this.keyValue) {
|
|
|
+ if (row == e[this.keyValue]) {
|
|
|
+ this.$emit("selectChange", e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.label) {
|
|
|
+ if (row == e[this.label]) {
|
|
|
+ this.$emit("selectChange", e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clear() {
|
|
|
+ if (this.url) {
|
|
|
+ this.data = this.$options.data().data;
|
|
|
+ this.getDicData();
|
|
|
+ }
|
|
|
+ this.$emit("selectChange", null);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep .el-col-md-8 {
|
|
|
+ width: 24.33333%;
|
|
|
+}
|
|
|
+</style>
|
Qukatie