jobsys-explore 1.0.1

package/components/result/ExResult.jsx

@@ -0,0 +1,122 @@
+import { defineComponent } from "vue"
+import "./index.less"
+
+/**
+ * ExResult 结果页
+ */
+export default defineComponent({
+	name: "ExResult",
+	props: {
+		/**
+		 * 结果类型
+		 * @values 'success', 'error', 'info', 'warning'
+		 */
+		type: { type: String, default: "success" },
+
+		/**
+		 * 标题
+		 */
+		title: { type: String, default: "" },
+
+		/**
+		 * 描述
+		 */
+		description: { type: String, default: "" },
+	},
+	setup(props, { slots }) {
+		const iconElem = () => {
+			let elem = null
+
+			if (slots.icon) {
+				elem = slots.icon()
+			} else {
+				switch (props.type) {
+					case "success":
+						elem = (
+							<i class={"exicon"}>
+								<svg
+									viewBox="64 64 896 896"
+									data-icon="check-circle"
+									width="1em"
+									height="1em"
+									fill="currentColor"
+									aria-hidden="true"
+									focusable="false"
+								>
+									<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
+								</svg>
+							</i>
+						)
+						break
+
+					case "info":
+						elem = (
+							<i class={"exicon"}>
+								<svg
+									viewBox="64 64 896 896"
+									data-icon="exclamation-circle"
+									width="1em"
+									height="1em"
+									fill="currentColor"
+									aria-hidden="true"
+									focusable="false"
+								>
+									<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
+								</svg>
+							</i>
+						)
+						break
+
+					case "warning":
+						elem = (
+							<i class={"exicon"}>
+								<svg
+									viewBox="64 64 896 896"
+									data-icon="warning"
+									width="1em"
+									height="1em"
+									fill="currentColor"
+									aria-hidden="true"
+									focusable="false"
+								>
+									<path d="M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
+								</svg>
+							</i>
+						)
+						break
+
+					case "error":
+						elem = (
+							<i class={"exicon"}>
+								<svg
+									viewBox="64 64 896 896"
+									data-icon="close-circle"
+									width="1em"
+									height="1em"
+									fill="currentColor"
+									aria-hidden="true"
+									focusable="false"
+								>
+									<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
+								</svg>
+							</i>
+						)
+						break
+					default:
+						break
+				}
+			}
+
+			return elem
+		}
+
+		return () => (
+			<div class={`ex-result ex-result__${props.type}`}>
+				<div class={"ex-result-icon"}>{iconElem()}</div>
+				<div class={"ex-result-title"}>{slots.title ? slots.title?.() : props.title}</div>
+				<div class={"ex-result-description"}>{slots.description ? slots.description?.() : props.description}</div>
+				<div class={"ex-result-extra"}>{slots.extra?.()}</div>
+			</div>
+		)
+	},
+})

package/components/result/index.js

@@ -0,0 +1,5 @@
+import _ExResult from "./ExResult.jsx"
+import withInstall from "../../utils/withInstall"
+
+export const ExResult = withInstall(_ExResult)
+export default ExResult

package/components/result/index.less

@@ -0,0 +1,60 @@
+.ex-result {
+	padding: 48px 32px;
+	
+	.ex-result-icon {
+		margin-bottom: 24px;
+		text-align: center;
+		
+		& > .exicon {
+			font-size: 72px;
+		}
+	}
+	
+	.ex-result-title {
+		color: rgba(0, 0, 0, .85);
+		font-size: 24px;
+		line-height: 1.8;
+		text-align: center;
+	}
+	
+	.ex-result-description {
+		color: rgba(0, 0, 0, .45);
+		font-size: 14px;
+		line-height: 1.6;
+		text-align: center;
+	}
+	
+	.ex-result-extra {
+		margin-top: 32px;
+		text-align: center;
+	}
+	
+	&.ex-result__success .ex-result-icon > .exicon {
+		color: #52c41a;
+	}
+	
+	&.ex-result__info .ex-result-icon > .exicon {
+		color: #1890ff;
+	}
+	
+	&.ex-result__warning .ex-result-icon > .exicon {
+		color: #faad14;
+	}
+	
+	&.ex-result__error .ex-result-icon > .exicon {
+		color: #f5222d;
+	}
+	
+	.exicon {
+		display: inline-block;
+		color: inherit;
+		font-style: normal;
+		line-height: 0;
+		text-align: center;
+		text-transform: none;
+		vertical-align: -.125em;
+		text-rendering: optimizeLegibility;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+}

package/components/search/ExSearch.jsx

@@ -0,0 +1,252 @@
+import { defineComponent, reactive, ref } from "vue"
+import { Button, Icon, Popup, Search } from "vant"
+import { find, isArray, isFunction } from "lodash-es"
+import { createExpand, createField, createQuick } from "./components"
+import "./index.less"
+import ExGrid from "../grid/ExGrid.jsx"
+
+/**
+ * ExSearch 搜索组件
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExSearch",
+	props: {
+		modelValue: { type: String, default: "" },
+
+		/**
+		 * @typedef {Object} ExSearchItemConfig 搜索项
+		 * @property {string} key 搜索项的 key
+		 * @property {string} title 搜索项的标题
+		 * @property {string} type 搜索项的类型
+		 * @property {boolean} [primary] 为 true 列表展示为搜索框，该项存在会覆盖 keyword 配置
+		 * @property {boolean} [quick] 为 true 展示为快速检索项
+		 * @property {boolean|Object} [expandable] 搜索项是否展开
+		 * @property {Array|Function} [options] 搜索项的选项
+		 * @property {Object} [inputProps] 搜索项的输入框属性
+		 * @property {*} [defaultValue] 搜索项的值
+		 * @property {*} [_temp] 搜索项的临时值[内部使用]
+		 * */
+
+		/**
+		 *
+		 * 搜索项的配置, 详见 [ExSearchItemConfig](#exsearchitemconfig-配置)
+		 *
+		 */
+		columns: { type: Array, default: () => [] },
+
+		/**
+		 * 占位提示文字
+		 */
+		placeholder: { type: String, default: "请输入搜索关键词" },
+
+		/**
+		 * 名称，作为提交表单时的标识符
+		 */
+		keyword: { type: String, default: "keyword" },
+
+		/**
+		 * 搜索框左侧文本
+		 */
+		label: { type: String, default: "" },
+
+		/**
+		 * 是否将输入框设为只读状态，只读状态下无法输入内容
+		 */
+		readonly: { type: Boolean, default: false },
+
+		/**
+		 * 是否禁用输入框
+		 */
+		disabled: { type: Boolean, default: false },
+
+		/**
+		 * 输入框内容对齐方式
+		 * @values left, right, center
+		 */
+		inputAlign: { type: String, default: "left" },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/search)
+		 */
+		searchProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue", "search"],
+	setup(props, { emit }) {
+		const componentValue = ref(props.modelValue)
+
+		const state = reactive({
+			queryForm: {}, // 搜索表单
+			quickColumns: [], //快速检索项
+			fieldColumns: [], //表单搜索项
+
+			showFilterPopup: false,
+		})
+
+		const initQueryForm = () => {
+			const form = {}
+			props.columns.forEach((item) => {
+				let value = ""
+				//如果是展开显示的，那么默认值为空字符串
+				//如果展开为多选，那么默认值为 []
+				if (item.expandable === "multiple" || item.type === "cascade") {
+					value = []
+				}
+
+				if (item.defaultValue) {
+					value = isFunction(item.defaultValue) ? item.defaultValue() : item.defaultValue
+				}
+
+				if (item.quick && !find(state.quickColumns, { key: item.key })) {
+					state.quickColumns.push(item)
+				} else {
+					if (item.expandable) {
+						if (!item.options) {
+							console.error(`expandable 为 true 时，必须提供 options 属性`)
+							return
+						}
+					}
+
+					if (!find(state.fieldColumns, { key: item.key })) {
+						state.fieldColumns.push(item)
+					}
+				}
+				form[item.key] = value
+			})
+
+			state.queryForm = form
+		}
+
+		initQueryForm()
+
+		const onUpdateValue = (value) => {
+			emit("update:modelValue", value)
+		}
+
+		const getQueryForm = () => {
+			const form = {}
+			Object.keys(state.queryForm).forEach((key) => {
+				let value = state.queryForm[key]
+
+				if (value && (!isArray(value) || value.length)) {
+					form[key] = value
+				}
+			})
+
+			if (componentValue.value) {
+				form[props.keyword] = componentValue.value
+			}
+
+			return form
+		}
+
+		const onOpenFilter = () => {
+			state.showFilterPopup = true
+		}
+
+		const onCloseFilter = () => {
+			state.showFilterPopup = false
+		}
+
+		const onSearch = () => {
+			const form = getQueryForm()
+			emit("search", form)
+		}
+
+		const onFieldSearch = () => {
+			state.showFilterPopup = false
+			onSearch()
+		}
+
+		const onClearFields = () => {
+			state.fieldColumns.forEach((item) => {
+				state.queryForm[item.key] = ""
+			})
+		}
+
+		/******************* render *********************/
+
+		const quickElems = () => {
+			return state.quickColumns.map((item) => createQuick(item, state.queryForm, onSearch))
+		}
+
+		const popupHeaderElem = () => (
+			<div class={"ex-search-popup__header van-hairline--bottom"}>
+				<h2 class={"ex-search-popup__title"}>{props.title}</h2>
+				<span class={"ex-search-popup__closer"}>
+					<Icon
+						name={"cross"}
+						class={"van-badge__wrapper van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"}
+						onClick={() => (state.showFilterPopup = false)}
+					></Icon>
+				</span>
+			</div>
+		)
+
+		const fieldElems = () => (
+			<div class={"ex-search-popup__content"}>
+				{state.fieldColumns.map((item) => (item.expandable ? createExpand(item, state.queryForm) : createField(item, state.queryForm)))}
+			</div>
+		)
+
+		const popupFooterElem = () => (
+			<div class={"ex-search-popup__footer van-hairline--top"}>
+				<ExGrid>
+					{{
+						default: () => [
+							<Button type={"default"} size={"small"} round={true} onClick={onClearFields}>
+								清除
+							</Button>,
+							<Button type={"primary"} size={"small"} round={true} onClick={onFieldSearch}>
+								搜索
+							</Button>,
+						],
+					}}
+				</ExGrid>
+			</div>
+		)
+
+		return () => (
+			<div class="ex-search">
+				<Search
+					v-model={componentValue.value}
+					name={props.keyword}
+					shape={"round"}
+					label={props.label}
+					inputAlign={props.inputAlign}
+					disabled={props.disabled}
+					readonly={props.readonly}
+					placeholder={props.placeholder}
+					onUpdate:modelValue={onUpdateValue}
+					onSearch={onSearch}
+					{...props.searchProps}
+				></Search>
+
+				<div class={"ex-search__quick-bar"}>
+					<div class={"ex-search__quick-container"}>{quickElems()}</div>
+					{state.fieldColumns?.length ? (
+						<div class={"ex-search__filter"} onClick={onOpenFilter}>
+							筛选<Icon name={"filter-o"}></Icon>
+						</div>
+					) : null}
+				</div>
+
+				<Popup
+					v-model:show={state.showFilterPopup}
+					closeable={false}
+					position={"bottom"}
+					round={true}
+					teleport={"body"}
+					closeOnPopstate={true}
+					class={`ex-search-popup`}
+					safeAreaInsetBottom={true}
+					safeAreaInsetTop={true}
+					onClickOverlay={onCloseFilter}
+					onClickCloseIcon={onCloseFilter}
+				>
+					{{ default: () => [popupHeaderElem(), fieldElems(), popupFooterElem()] }}
+				</Popup>
+			</div>
+		)
+	},
+})

package/components/search/components/Expand.jsx

@@ -0,0 +1,77 @@
+import { isUndefined } from "lodash-es"
+import { reactive } from "vue"
+import { Button, Collapse, CollapseItem } from "vant"
+import ExGrid from "../../grid/ExGrid.jsx"
+
+const render = (item, queryForm) => {
+	if (isUndefined(item._temp)) {
+		item._temp = reactive({
+			activeNames: item.key,
+		})
+	}
+
+	const toggleChooseOption = (value) => {
+		if (item.expandable === "multiple") {
+			if (!queryForm[item.key] || !queryForm[item.key]?.length) {
+				queryForm[item.key] = [value]
+			} else {
+				const index = queryForm[item.key].indexOf(value)
+				if (index === -1) {
+					queryForm[item.key].push(value)
+				} else {
+					queryForm[item.key].splice(index, 1)
+				}
+			}
+		} else {
+			queryForm[item.key] = queryForm[item.key] === value ? "" : value
+		}
+	}
+
+	const isOptionActive = (value) => {
+		if (item.expandable === "multiple") {
+			return queryForm[item.key]?.includes(value)
+		} else {
+			return queryForm[item.key] === value
+		}
+	}
+
+	const optionElems = () => (
+		<ExGrid columns={3}>
+			{{
+				default: () =>
+					item.options.map((option) => (
+						<Button
+							class={`ex-search__expand-option`}
+							type={`${isOptionActive(option.value) ? "primary" : "default"}`}
+							hairline={true}
+							round={true}
+							size={"small"}
+							onClick={() => toggleChooseOption(option.value)}
+						>
+							{option.text}
+						</Button>
+					)),
+			}}
+		</ExGrid>
+	)
+
+	return (
+		<div class={"ex-search__popup-item ex-search__expand-item"}>
+			<Collapse v-model={item._temp.activeNames} border={false} accordion={true}>
+				{{
+					default: () => (
+						<CollapseItem name={item.key}>
+							{{
+								default: () => <div class={"ex-search__expand-options"}>{optionElems()}</div>,
+								title: () => <span class={"ex-search__expand-title"}>{item.title}</span>,
+								value: () => <span class={"ex-search__expand-trigger"}>展开</span>,
+							}}
+						</CollapseItem>
+					),
+				}}
+			</Collapse>
+		</div>
+	)
+}
+
+export default render

package/components/search/components/Field.jsx

@@ -0,0 +1,27 @@
+import ExSelect from "../../form/ExSelect.jsx"
+import ExDate from "../../form/ExDate.jsx"
+import ExDatetime from "../../form/ExDatetime.jsx"
+import ExField from "../../form/ExField.jsx"
+import ExNumber from "../../form/ExNumber.jsx"
+
+const render = (item, queryForm) => {
+	const fieldElem = () => {
+		const fieldProps = { label: item.title, name: item.key, placeholder: `搜索${item.title}` }
+
+		if (item.type === "select") {
+			return <ExSelect v-model={queryForm[item.key]} clearable={true} options={item.options} {...fieldProps} {...item.inputProps}></ExSelect>
+		} else if (item.type === "date") {
+			return <ExDate v-model={queryForm[item.key]} {...fieldProps} {...item.inputProps}></ExDate>
+		} else if (item.type === "datetime") {
+			return <ExDatetime v-model={queryForm[item.key]} {...fieldProps} {...item.inputProps}></ExDatetime>
+		} else if (item.type === "number") {
+			return <ExNumber v-model={queryForm[item.key]} {...fieldProps} {...item.props}></ExNumber>
+		}
+
+		return <ExField v-model={queryForm[item.key]} {...fieldProps} {...item.inputProps}></ExField>
+	}
+
+	return <div class={"ex-search__popup-item ex-search__field-item"}>{fieldElem()}</div>
+}
+
+export default render

package/components/search/components/Quick.jsx

@@ -0,0 +1,53 @@
+import { ref } from "vue"
+import ExSelect from "../../form/ExSelect.jsx"
+import ExCascader from "../../form/ExCascader.jsx"
+import { Icon } from "vant"
+
+const render = (item, queryForm, onSearch) => {
+	const selectRef = ref()
+	const cascadeRef = ref()
+
+	let renderItem
+	if (item.type === "select") {
+		renderItem = (
+			<ExSelect ref={selectRef} v-model={queryForm[item.key]} options={item.options} clearable={true} onChange={onSearch}>
+				{{
+					default: () => (
+						<div class={`ex-search__quick-trigger ${queryForm[item.key] ? "active" : ""}`}>
+							<span class={"ex-search__quick-label"}>{selectRef.value?.displayText || item.title}</span>
+							<span class={"ex-search__quick-icon"}>
+								<Icon name={"arrow-down"}></Icon>
+							</span>
+						</div>
+					),
+				}}
+			</ExSelect>
+		)
+	} else if (item.type === "cascade") {
+		renderItem = (
+			<ExCascader
+				ref={cascadeRef}
+				v-model={queryForm[item.key]}
+				options={item.options}
+				clearable={true}
+				title={`搜索${item.title}`}
+				onChange={onSearch}
+			>
+				{{
+					default: () => (
+						<div class={`ex-search__quick-trigger ${queryForm[item.key]?.length ? "active" : ""}`}>
+							<span class={"ex-search__quick-label"}>{cascadeRef.value?.displayText || item.title}</span>
+							<span class={"ex-search__quick-icon"}>
+								<Icon name={"arrow-down"}></Icon>
+							</span>
+						</div>
+					),
+				}}
+			</ExCascader>
+		)
+	}
+
+	return <div class={"ex-search__quick-item"}>{renderItem}</div>
+}
+
+export default render

package/components/search/components/index.js

@@ -0,0 +1,5 @@
+import createExpand from "./Expand.jsx"
+import createQuick from "./Quick.jsx"
+import createField from "./Field.jsx"
+
+export { createExpand, createQuick, createField }

package/components/search/index.js

@@ -0,0 +1,5 @@
+import _ExSearch from "./ExSearch.jsx"
+import withInstall from "../../utils/withInstall"
+
+export const ExSearch = withInstall(_ExSearch)
+export default ExSearch