sh-view 2.8.0 → 2.8.2

package/packages/components/sh-toolbar/index.vue

@@ -1,182 +1,182 @@
-<template>
-	<div class="sh-vxe-toolbar">
-		<div class="toolbar-left">
-			<slot name="left"></slot>
-			<template v-if="isTool">
-				<template v-for="(toolBtn, toolBtnIndex) in toolBtns" :key="toolBtnIndex">
-					<vxe-button v-ripple v-bind="toolBtn" @click="handleToolBtn(toolBtn)"></vxe-button>
-				</template>
-			</template>
-			<vxe-radio-group v-else v-model="leftActive" @change="handleLeftBtn">
-				<template v-for="(leftBtn, leftBtnIndex) in leftBtns" :key="leftBtnIndex">
-					<vxe-radio-button v-ripple v-bind="leftBtn" :label="leftBtn.value"></vxe-radio-button>
-				</template>
-			</vxe-radio-group>
-			<slot name="leftr"></slot>
-		</div>
-		<div class="toolbar-right">
-			<slot name="rightl"></slot>
-			<template v-for="(rightBtn, rightBtnIndex) in rightBtns" :key="rightBtnIndex">
-				<vxe-button v-ripple v-bind="rightBtn" @click="handleRightBtn(rightBtn)"></vxe-button>
-			</template>
-			<slot name="right"></slot>
-		</div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
-export default defineComponent({
-	name: 'ShToolbar',
-	props: {
-		modelValue: {
-			type: String
-		},
-		relation: {
-			type: Boolean
-		},
-		leftContain: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		leftConfig: {
-			type: Array,
-			default() {
-				return [
-					{ value: '1', code: 'wss', content: '未送审' },
-					{ value: '2', code: 'bth', content: '被退回' },
-					{ value: '3', code: 'yss', content: '已送审' },
-					{ value: '4', code: 'ygd', content: '已归档' },
-					{ value: '5', code: 'qb', content: '全部' },
-					{ value: '6', code: 'dsh', content: '待审核' },
-					{ value: '7', code: 'ysh', content: '已审核' }
-				]
-			}
-		},
-		rightConfig: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		isTool: {
-			type: Boolean
-		},
-		toolsContain: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		toolsConfig: {
-			type: Array,
-			default() {
-				return [
-					{ code: 'add', content: '新增', status: 'primary', icon: 'vxe-icon-add' },
-					{ code: 'edit', content: '修改', status: 'warning', icon: 'vxe-icon-edit' },
-					{ code: 'delete', content: '删除', status: 'danger', icon: 'vxe-icon-delete' },
-					{ code: 'detail', content: '查看', status: '', icon: 'vxe-icon-information' },
-					{ code: 'export', content: '导出', status: 'success', icon: 'vxe-icon-download' },
-					{ code: 'import', content: '导入', status: 'primary', icon: 'vxe-icon-upload' },
-					{ code: 'print', content: '打印', status: 'warning', icon: 'vxe-icon-print' },
-					{ code: 'batch-add', content: '批量新增', status: 'primary', icon: 'vxe-icon-add' },
-					{ code: 'batch-edit', content: '批量修改', status: 'warning', icon: 'vxe-icon-edit' },
-					{ code: 'batch-delete', content: '批量删除', status: 'danger', icon: 'vxe-icon-delete' },
-					{ code: 'batch-detail', content: '查看', status: '', icon: 'vxe-icon-information' }
-				]
-			}
-		}
-	},
-	emits: ['update:modelValue', 'left', 'right', 'tool'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const leftActive = ref(props.modelValue)
-
-		const leftBtns = computed(() => {
-			let lBtns = []
-			if (props.leftContain && Array.isArray(props.leftContain)) {
-				lBtns = props.leftContain.map(item => props.leftConfig.find(btn => btn.code === item))
-			}
-			return lBtns
-		})
-		const rightBtns = computed(() => {
-			let rBtns = []
-			if (props.rightConfig && Array.isArray(props.rightConfig)) {
-				rBtns = props.rightConfig
-			}
-			let leftCode = leftBtns.value.find(btn => btn.value === leftActive.value)
-			if (props.relation && leftCode) {
-				rBtns = rBtns.filter(item => item.code && item.code.split(',').includes(leftCode.code))
-			}
-			return rBtns
-		})
-		const toolBtns = computed(() => {
-			let toolBtns = []
-			if (props.toolsContain && Array.isArray(props.toolsContain)) {
-				toolBtns = props.toolsContain.map(item => props.toolsConfig.find(btn => btn.code === item))
-			}
-			return toolBtns
-		})
-
-		const handleLeftBtn = ({ label }) => {
-			let btnObj = props.leftConfig.find(item => item.value === label)
-			emitValue()
-			emit('left', label, btnObj)
-		}
-		const handleRightBtn = btn => {
-			emit('right', btn.value, btn)
-		}
-		const handleToolBtn = btn => {
-			emit('tool', btn)
-		}
-		const emitValue = () => {
-			emit('update:modelValue', leftActive.value)
-		}
-
-		watch(
-			() => props.modelValue,
-			nv => {
-				leftActive.value = nv
-			}
-		)
-
-		return {
-			leftActive,
-			toolBtns,
-			leftBtns,
-			rightBtns,
-			handleToolBtn,
-			handleLeftBtn,
-			handleRightBtn
-		}
-	}
-})
-</script>
-
-<style lang="scss">
-.sh-vxe-toolbar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 10px 5px;
-	box-sizing: border-box;
-	background-color: var(--vxe-table-body-background-color);
-	width: 100%;
-	.toolbar-left {
-		flex: 1;
-		.vxe-radio-button > input:checked + .vxe-radio--label {
-			border-color: var(--vxe-primary-color);
-			background: linear-gradient(-10deg, var(--vxe-primary-color), var(--vxe-primary-lighten-color));
-		}
-	}
-	.toolbar-right {
-		flex: 0;
-		white-space: nowrap;
-	}
-}
-</style>
+<template>
+	<div class="sh-vxe-toolbar">
+		<div class="toolbar-left">
+			<slot name="left"></slot>
+			<template v-if="isTool">
+				<template v-for="(toolBtn, toolBtnIndex) in toolBtns" :key="toolBtnIndex">
+					<vxe-button v-ripple v-bind="toolBtn" @click="handleToolBtn(toolBtn)"></vxe-button>
+				</template>
+			</template>
+			<vxe-radio-group v-else v-model="leftActive" @change="handleLeftBtn">
+				<template v-for="(leftBtn, leftBtnIndex) in leftBtns" :key="leftBtnIndex">
+					<vxe-radio-button v-ripple v-bind="leftBtn" :label="leftBtn.value"></vxe-radio-button>
+				</template>
+			</vxe-radio-group>
+			<slot name="leftr"></slot>
+		</div>
+		<div class="toolbar-right">
+			<slot name="rightl"></slot>
+			<template v-for="(rightBtn, rightBtnIndex) in rightBtns" :key="rightBtnIndex">
+				<vxe-button v-ripple v-bind="rightBtn" @click="handleRightBtn(rightBtn)"></vxe-button>
+			</template>
+			<slot name="right"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+export default defineComponent({
+	name: 'ShToolbar',
+	props: {
+		modelValue: {
+			type: String
+		},
+		relation: {
+			type: Boolean
+		},
+		leftContain: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		leftConfig: {
+			type: Array,
+			default() {
+				return [
+					{ value: '1', code: 'wss', content: '未送审' },
+					{ value: '2', code: 'bth', content: '被退回' },
+					{ value: '3', code: 'yss', content: '已送审' },
+					{ value: '4', code: 'ygd', content: '已归档' },
+					{ value: '5', code: 'qb', content: '全部' },
+					{ value: '6', code: 'dsh', content: '待审核' },
+					{ value: '7', code: 'ysh', content: '已审核' }
+				]
+			}
+		},
+		rightConfig: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		isTool: {
+			type: Boolean
+		},
+		toolsContain: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		toolsConfig: {
+			type: Array,
+			default() {
+				return [
+					{ code: 'add', content: '新增', status: 'primary', icon: 'vxe-icon-add' },
+					{ code: 'edit', content: '修改', status: 'warning', icon: 'vxe-icon-edit' },
+					{ code: 'delete', content: '删除', status: 'danger', icon: 'vxe-icon-delete' },
+					{ code: 'detail', content: '查看', status: '', icon: 'vxe-icon-information' },
+					{ code: 'export', content: '导出', status: 'success', icon: 'vxe-icon-download' },
+					{ code: 'import', content: '导入', status: 'primary', icon: 'vxe-icon-upload' },
+					{ code: 'print', content: '打印', status: 'warning', icon: 'vxe-icon-print' },
+					{ code: 'batch-add', content: '批量新增', status: 'primary', icon: 'vxe-icon-add' },
+					{ code: 'batch-edit', content: '批量修改', status: 'warning', icon: 'vxe-icon-edit' },
+					{ code: 'batch-delete', content: '批量删除', status: 'danger', icon: 'vxe-icon-delete' },
+					{ code: 'batch-detail', content: '查看', status: '', icon: 'vxe-icon-information' }
+				]
+			}
+		}
+	},
+	emits: ['update:modelValue', 'left', 'right', 'tool'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const leftActive = ref(props.modelValue)
+
+		const leftBtns = computed(() => {
+			let lBtns = []
+			if (props.leftContain && Array.isArray(props.leftContain)) {
+				lBtns = props.leftContain.map(item => props.leftConfig.find(btn => btn.code === item))
+			}
+			return lBtns
+		})
+		const rightBtns = computed(() => {
+			let rBtns = []
+			if (props.rightConfig && Array.isArray(props.rightConfig)) {
+				rBtns = props.rightConfig
+			}
+			let leftCode = leftBtns.value.find(btn => btn.value === leftActive.value)
+			if (props.relation && leftCode) {
+				rBtns = rBtns.filter(item => item.code && item.code.split(',').includes(leftCode.code))
+			}
+			return rBtns
+		})
+		const toolBtns = computed(() => {
+			let toolBtns = []
+			if (props.toolsContain && Array.isArray(props.toolsContain)) {
+				toolBtns = props.toolsContain.map(item => props.toolsConfig.find(btn => btn.code === item))
+			}
+			return toolBtns
+		})
+
+		const handleLeftBtn = ({ label }) => {
+			let btnObj = props.leftConfig.find(item => item.value === label)
+			emitValue()
+			emit('left', label, btnObj)
+		}
+		const handleRightBtn = btn => {
+			emit('right', btn.value, btn)
+		}
+		const handleToolBtn = btn => {
+			emit('tool', btn)
+		}
+		const emitValue = () => {
+			emit('update:modelValue', leftActive.value)
+		}
+
+		watch(
+			() => props.modelValue,
+			nv => {
+				leftActive.value = nv
+			}
+		)
+
+		return {
+			leftActive,
+			toolBtns,
+			leftBtns,
+			rightBtns,
+			handleToolBtn,
+			handleLeftBtn,
+			handleRightBtn
+		}
+	}
+})
+</script>
+
+<style lang="scss">
+.sh-vxe-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px 5px;
+	box-sizing: border-box;
+	background-color: var(--vxe-table-body-background-color);
+	width: 100%;
+	.toolbar-left {
+		flex: 1;
+		.vxe-radio-button > input:checked + .vxe-radio--label {
+			border-color: var(--vxe-primary-color);
+			background: linear-gradient(-10deg, var(--vxe-primary-color), var(--vxe-primary-lighten-color));
+		}
+	}
+	.toolbar-right {
+		flex: 0;
+		white-space: nowrap;
+	}
+}
+</style>