123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- <template>
- <div :style="{width}">
- <template v-if="!securityConfig.trigger">
- <el-input :placeholder="config.placeholder" readonly v-bind="$attrs" :model-value="proxyOtherValue[0].value || modelValue" :style="{width: config.width || '100%'}" :disabled="disabled" @click="openDialog">
- <template #append>
- <el-button icon="el-icon-search" :disabled="disabled" @click="openDialog"></el-button>
- </template>
- </el-input>
- </template>
- <template v-if="securityConfig.trigger === 'button'">
- <cip-button type="primary" :disabled="disabled" @click="openDialog">选择({{multiple && (defaultValue?.length || 0)}})</cip-button>
- </template>
- <cip-dialog
- v-model="tableDialog"
- :title="`选择${config.label}`"
- custom-class="select-input__dialog"
- top="6vh"
- :on-confirm="onConfirm">
- <select-table
- :checked-item="checkItem"
- :option-props="optionProps"
- :hide-index="config.tableHideIndex"
- :entity="config.entity"
- :curd-fn="config.curdFn"
- :table-columns="config.tableColumns"
- :search-field-list="config.searchFieldList"
- :default-search-filter="config.defaultSearchFilter"
- :with-pagination="config.withPagination"
- :with-tags="config.withTags"
- :check-type="multiple?'checkbox':'radio'"
- :hide-search="config.hideSearch"
- class="select-input-table-dialog"
- @select-value="selectValue">
- </select-table>
- </cip-dialog>
- </div>
- </template>
- <script>
- import CipDialog from '@cip/components/cip-dialog'
- import CipButton from '@cip/components/cip-button'
- import SelectTable from './components/select-table'
- import CipMessage from '@cip/components/cip-message'
- import { ElInput, ElButton } from 'element-plus'
- import { computed, ref } from 'vue'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import { isArray } from '@cip/utils/util'
- export default {
- components: { ElInput, ElButton, CipDialog, CipButton, SelectTable },
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const { emitInput, emitOtherValue, proxyOtherValue, securityConfig, updateStream, ...formInput } = useFormInput(props, context, {
- fromModelValue: () => {},
- maxOtherKey: 2
- })
- const multiple = computed(() => {
- return securityConfig.value.multiple ?? false
- })
- const optionProps = computed(() => {
- return Object.assign({},
- { label: 'label', value: 'value' },
- securityConfig.value.defaultProp, // 兼容历史数据
- securityConfig.value.optionProps
- )
- })
- const tableDialog = ref(false)
- // 打开选择弹框
- const openDialog = () => {
- checkItem.value = multiple.value ? [...defaultValue.value] : { ...defaultValue.value }
- tableDialog.value = true
- }
- const getEmitValue = (type) => { // {'value'| 'label'}
- const rows = checkItem.value
- if (multiple.value) {
- let modelValue = rows.map(i => i[optionProps.value[type]])
- if (!securityConfig.value.array) {
- modelValue = modelValue.join(',')
- }
- return modelValue
- } else {
- return rows[optionProps.value[type]]
- }
- }
- // 确认保存
- const onConfirm = async (resolve, reject) => {
- if (securityConfig.value.validate) {
- const { valid, message = '校验失败' } = await securityConfig.value.validate?.(checkItem.value)
- if (!valid) {
- CipMessage.warning(message)
- reject()
- }
- }
- const value = getEmitValue('value') // multiple.value ? rows.map(i => i[optionProps.value.value]).join(',') : rows[optionProps.value.value]
- const label = getEmitValue('label') // multiple.value ? rows.map(i => i[optionProps.value.label]).join(',') : rows[optionProps.value.label]
- // emitInput(value)
- updateStream.appendValue(value)
- updateStream.appendOtherValue(label)
- // proxyOtherValue[0].value = label
- updateStream.appendOtherValue(checkItem.value, 2)
- // proxyOtherValue[1].value = checkItem.value
- updateStream.end()
- resolve()
- }
- const fromModel = (val) => {
- const result = []
- if (val) {
- if (isArray(val)) {
- return val
- } else {
- return val.split(',')
- }
- }
- return result
- }
- // 选择table组件
- const defaultValue = computed({
- get () {
- if (multiple.value) {
- if (proxyOtherValue[1].value) return proxyOtherValue[1].value
- let code = fromModel(props.modelValue)
- if (securityConfig.value.valueType === 'number') code = code.map(v => Number(v))
- const name = fromModel(proxyOtherValue[0].value) // 没有这个数据怎么办
- return code.map((i, idx) => ({
- [optionProps.value.value]: i,
- [optionProps.value.label]: name[idx]
- }))
- } else {
- return {
- [optionProps.value.value]: props.modelValue,
- [optionProps.value.label]: proxyOtherValue[0].value
- }
- }
- }
- })
- const checkItem = ref()
- const selectValue = async (val) => {
- checkItem.value = val
- }
- return {
- ...formInput,
- securityConfig,
- proxyOtherValue,
- multiple,
- optionProps,
- tableDialog,
- defaultValue,
- openDialog,
- onConfirm,
- checkItem,
- selectValue
- }
- }
- }
- </script>
- <style lang="less">
- .select-input-table-dialog{
- .dialog-tags{
- flex-basis: 220px;
- }
- }
- .select-input__dialog{
- .el-dialog__body{
- padding: 0;
- }
- }
- </style>
|