|
@@ -0,0 +1,340 @@
|
|
|
+<style lang="scss">
|
|
|
+.ul-radio-group {
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ background: transparent;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ min-width: 80px;
|
|
|
+ padding: 0px 15px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-left: 0;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ .checkbox-button-input {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .ant-checkbox {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bgcolor {
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-color: #d9d9d9;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .item::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 1px;
|
|
|
+ top: -2px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 6px solid transparent;
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
+ border-left: 6px solid;
|
|
|
+ border-left-color: #e0e0e0;
|
|
|
+ -webkit-transform: rotate(-45deg);
|
|
|
+ -ms-transform: rotate(-45deg);
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ .item:hover {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ .selection {
|
|
|
+ color: #fff;
|
|
|
+ background: #1890ff;
|
|
|
+ // border-color: #1890ff;
|
|
|
+ }
|
|
|
+ .item.selection:hover {
|
|
|
+ color: #fff;
|
|
|
+ background: #40a9ff;
|
|
|
+ }
|
|
|
+ .item.selection:after {
|
|
|
+ border-left: 6px solid #1890ff;
|
|
|
+ }
|
|
|
+ .item:hover::after {
|
|
|
+ // border-color: #40a9ff;
|
|
|
+ border-left: 6px solid #40a9ff;
|
|
|
+ }
|
|
|
+ .bgcolor:hover {
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-color: #d9d9d9;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .bgcolor:hover::after {
|
|
|
+ // border-color: #40a9ff;
|
|
|
+ border-left: 6px solid #e0e0e0;
|
|
|
+ }
|
|
|
+ .bgcolor.selection:after {
|
|
|
+ border-left: 6px solid #e0e0e0;
|
|
|
+ }
|
|
|
+ .bgcolor.selection {
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-color: #d9d9d9;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .bgcolor.selection:hover {
|
|
|
+ // color: #1890ff;
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-color: #d9d9d9;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .bgcolor.selection:after {
|
|
|
+ border-left: 6px solid #e0e0e0;
|
|
|
+ }
|
|
|
+ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.ul-radio-group .item:first-child {
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+}
|
|
|
+.ul-radio-group .item.selection:first-child {
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
+ border-left: 1px solid #1890ff;
|
|
|
+}
|
|
|
+.ul-radio-group .item.selection:nth-child(2) {
|
|
|
+ border-left: 1px solid #1890ff;
|
|
|
+}
|
|
|
+.ul-radio-group .item:first-child:after {
|
|
|
+ border-left: 0;
|
|
|
+}
|
|
|
+.ul-radio-group .item:last-child {
|
|
|
+ border-radius: 0px 5px 5px 0px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div class="ul-radio-group">
|
|
|
+ <!-- <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
|
|
|
+ <a-checkbox
|
|
|
+ v-for="item of selectOption"
|
|
|
+ :label="item.label"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :class="{
|
|
|
+ item: true && userButton,
|
|
|
+ selection: selectedVal && selectedVal.indexOf(item.value) > -1 && userButton,
|
|
|
+ bgcolor: item.disabled,
|
|
|
+ }"
|
|
|
+ >{{ item.label }}</a-checkbox
|
|
|
+ >
|
|
|
+ </a-checkbox-group> -->
|
|
|
+ <el-cascader
|
|
|
+ v-model='selectedVal'
|
|
|
+ :disabled="disabled"
|
|
|
+ :options="selectOption"
|
|
|
+ :props="props"
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ :show-all-levels="false"
|
|
|
+ ></el-cascader>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import { dictionary } from '@/components/service/core/dictionary'
|
|
|
+import { isArray } from '@/utils/Tools'
|
|
|
+import { httpAction, getAction } from '@/api/manage'
|
|
|
+export default {
|
|
|
+ name: 'Cascader', // Cascader组件二次封装
|
|
|
+ props: {
|
|
|
+ userButton: {
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ code: {
|
|
|
+ // 参数code
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ allValue: {
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ // 外部传入的option 可替代请求项
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ // v-model绑定值
|
|
|
+ type: [Number, Array, String],
|
|
|
+ default() {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ // label 绑定值
|
|
|
+ type: [Array, String],
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ radioStyle: {
|
|
|
+ // 是否复选框模拟单选效果
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ // 是否禁用
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectOption: [],
|
|
|
+ props: { multiple: true },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ options(val) {
|
|
|
+ if (isArray(val)) {
|
|
|
+ this.selectOption.splice(0, this.selectOption.length)
|
|
|
+ this.selectOption.push(...val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectedVal(n, o) {
|
|
|
+ if (this.radioStyle && !this.allValue) {
|
|
|
+ if (n.length == 0) {
|
|
|
+ this.selectedVal = o
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectedVal: {
|
|
|
+ get: function () {
|
|
|
+ return this.value
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ this.selectChange(val)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.code && this.options.length == 0) {
|
|
|
+ // 如果code值不为空且options.lengt==0, 则去请求字典项
|
|
|
+ this.getOptions()
|
|
|
+ } else {
|
|
|
+ // 否则直接获取外部传入的options
|
|
|
+ this.selectOption.splice(0, this.selectOption.length)
|
|
|
+ this.selectOption.push(...this.options)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getOptions() {
|
|
|
+ // 获取字典项
|
|
|
+ getAction('/sys/dictItem/list', { dictId: this.code, pageSize: 1000, pageNo: 1 }).then((res) => {
|
|
|
+ if (res.success && isArray(res.result.records)) {
|
|
|
+ var data = res.result.records
|
|
|
+ data = data.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.itemText,
|
|
|
+ value: item.itemValue,
|
|
|
+ ...item,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.allValue) {
|
|
|
+ data.unshift({ label: '不检查', value: 'unlimited' })
|
|
|
+ if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
|
|
|
+ this.selectedVal = ['unlimited']
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
|
|
|
+ this.selectedVal = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.selectOption.push(...data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectChange(val) {
|
|
|
+ // 选择事件
|
|
|
+ if (!this.radioStyle) {
|
|
|
+ // 多选
|
|
|
+ var retrunData = []
|
|
|
+ let label = this.selectOption.filter((v) => val.findIndex((item) => item == v.value) > -1).map((v) => v.label)
|
|
|
+ if (this.allValue) {
|
|
|
+ if (val.findIndex((item) => item == 'unlimited') == 0) {
|
|
|
+ retrunData = val.slice(-1)
|
|
|
+ } else if (val.findIndex((item) => item == 'unlimited') == val.length - 1) {
|
|
|
+ retrunData = ['unlimited']
|
|
|
+ } else {
|
|
|
+ retrunData = val
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ retrunData = val
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$emit('input', retrunData)
|
|
|
+ this.$emit('update:label', label)
|
|
|
+ this.$emit('change', val)
|
|
|
+ // this.consoleFun('VALUE: ', val, 'LABEL:', label)
|
|
|
+ } else {
|
|
|
+ // 模拟单选radio效果
|
|
|
+ let selectVal = []
|
|
|
+ if (this.allValue) {
|
|
|
+ if (val.length == 0) {
|
|
|
+ selectVal = ['unlimited']
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (val.length == 0) {
|
|
|
+ selectVal = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.length > 0) {
|
|
|
+ selectVal = val.slice(-1)
|
|
|
+ }
|
|
|
+ let label = this.selectOption
|
|
|
+ .filter((v) => selectVal.findIndex((item) => item == v.value) > -1)
|
|
|
+ .map((v) => v.label)
|
|
|
+ this.$emit('input', selectVal)
|
|
|
+ this.$emit('update:label', label)
|
|
|
+ this.$emit('change', selectVal)
|
|
|
+ // this.consoleFun('VALUE: ', selectVal, 'LABEL:', label)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emitChange(...args) {
|
|
|
+ // emit change事件
|
|
|
+ this.$emit('change', ...args)
|
|
|
+ },
|
|
|
+ consoleFun(...args) {
|
|
|
+ // 打印信息
|
|
|
+ if (process.env.NODE_ENV == 'development') {
|
|
|
+ console.log(...args)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|