@seemusic/ui-components

Version:

A Vue 3 UI Library. Uses Composable.

chords-ui.seemusic.xyz

1 lines • 6.05 kB

Source Map (JSON)

{"version":3,"file":"EditTableCell.vue.mjs","sources":["../../../src/components/SopBasicTable/EditTableCell.vue"],"sourcesContent":["<template>\n <div class=\"edit-cell\">\n <template v-if=\"!isEdit\">\n <span>{{ defaultContent }}</span>\n\n \n <template v-if=\"editMode === 'EDIT_COLUMN'\">\n <Icon\n class=\"edit-cell__hover-icon\"\n icon='solar:pen-2-outline'\n @click=\"editScheduler(true)\"\n />\n </template>\n </template>\n\n <template v-else>\n \n <template v-if=\"column.editComponent === 'ElDatePicker'\">\n <ElDatePicker v-model=\"bindVal\" v-bind=\"ComponentProps\" />\n </template>\n <template v-else-if=\"column.editComponent === 'ElTimePicker'\">\n <ElTimePicker v-model=\"bindVal\" v-bind=\"ComponentProps\" />\n </template>\n\n <template v-else>\n <Component\n :is=\"ComponentName\"\n v-model=\"bindVal\"\n v-bind=\"ComponentProps\"\n >\n <template v-if=\"column.editComponent === 'ElSelect'\">\n <ElOption\n v-for=\"item in column.editComponentProps?.options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\"\n />\n </template>\n </Component>\n </template>\n\n <template v-if=\"editMode !== 'EDIT_ROW'\">\n <Icon\n class=\"edit-cell__icon\"\n icon='clarity:success-line'\n @click=\"existCellEdit(true)\"\n />\n <Icon\n class=\"edit-cell__icon\"\n icon='ic:baseline-clear'\n @click=\"existCellEdit(false)\"\n />\n </template>\n </template>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport {\n ElInput, ElInputNumber,\n ElSelect, ElSelectV2, ElTimeSelect, ElCascader,\n ElSwitch,\n ElTimePicker, ElDatePicker, ElMessage,\n ElOption\n} from 'element-plus';\nimport { Icon } from '@iconify/vue';\nimport { useLocale } from '../../composables/useLocale';\nimport type { TableColumn } from './SopBasicTable';\nimport type { Recordable } from '../../shims';\n\nconst props = defineProps<{\n column: TableColumn\n scope: Recordable\n isOpenEdit: boolean\n isCancelEditRow: boolean\n}>();\nconst emits = defineEmits<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (e: 'edit-column-change', val: any): void\n (e: 'cancel-edit-row-state-change'): void\n}>();\n\nconst { t } = useLocale();\n\nconst componentMap = {\n 'ElInput': ElInput,\n 'ElInputNumber': ElInputNumber,\n 'ElSelect': ElSelect,\n 'ElSelectV2': ElSelectV2,\n 'ElTimeSelect': ElTimeSelect,\n 'ElCascader': ElCascader,\n 'ElSwitch': ElSwitch,\n 'ElTimePicker': ElTimePicker,\n 'ElDatePicker': ElDatePicker\n};\n\nconst isEdit = ref(false);\n\nconst ComponentName = computed(() => props.column.editComponent ? componentMap[props.column.editComponent] : ElInput);\nconst ComponentProps = computed(() => props.column.editComponentProps ? props.column.editComponentProps : {});\nconst ComponentRule = computed(() => props.column.editRule);\n// 获取编辑模式\nconst editMode = computed(() => props.column.editRow ? 'EDIT_ROW' : props.column.editColumn ? 'EDIT_COLUMN' : '');\n\nconst defaultContent = ref(props.scope.row[props.column.prop as string] || '');\nconst bindVal = ref(defaultContent.value);\n\n\nwatch(\n () => props.isOpenEdit,\n (isOpenEdit) => {\n editScheduler(isOpenEdit);\n\n // 重置\n if (!isOpenEdit) {\n if (!props.isCancelEditRow) {\n existCellEdit(true, false);\n } else {\n emits('cancel-edit-row-state-change');\n }\n bindVal.value = defaultContent.value;\n }\n }\n);\n\n\n/**\n * 退出表格编辑模式\n */\nfunction existCellEdit(flag: boolean, isNeedScheduler = true) {\n if (flag) {\n if ((ComponentRule.value || ComponentRule.value === undefined) && !bindVal.value) {\n ElMessage.error(t('sop.basicTable.emptyRuleValidatorText'));\n return;\n }\n\n defaultContent.value = bindVal.value;\n emits('edit-column-change', defaultContent.value);\n } else {\n // 重置\n bindVal.value = defaultContent.value;\n }\n\n if (isNeedScheduler) {\n editScheduler(false);\n }\n}\n\n/**\n * edit 调度器\n */\nasync function editScheduler(editable: boolean) {\n if (props.column.editColumnScheduler && !isEdit.value) {\n isEdit.value = await props.column.editColumnScheduler();\n } else {\n isEdit.value = editable;\n }\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmFM,UAAA,EAAE,MAAM;AAEd,UAAM,eAAe;AAAA,MACnB,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAGZ,UAAA,SAAS,IAAI,KAAK;AAElB,UAAA,gBAAgB,SAAS,MAAM,MAAM,OAAO,gBAAgB,aAAa,MAAM,OAAO,aAAa,IAAI,OAAO;AAC9G,UAAA,iBAAiB,SAAS,MAAM,MAAM,OAAO,qBAAqB,MAAM,OAAO,qBAAqB,CAAA,CAAE;AAC5G,UAAM,gBAAgB,SAAS,MAAM,MAAM,OAAO,QAAQ;AAEpD,UAAA,WAAW,SAAS,MAAM,MAAM,OAAO,UAAU,aAAa,MAAM,OAAO,aAAa,gBAAgB,EAAE;AAE1G,UAAA,iBAAiB,IAAI,MAAM,MAAM,IAAI,MAAM,OAAO,IAAc,KAAK,EAAE;AACvE,UAAA,UAAU,IAAI,eAAe,KAAK;AAGxC;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,eAAe;AACd,sBAAc,UAAU;AAGxB,YAAI,CAAC,YAAY;AACX,cAAA,CAAC,MAAM,iBAAiB;AAC1B,0BAAc,MAAM,KAAK;AAAA,UAAA,OACpB;AACL,kBAAM,8BAA8B;AAAA,UACtC;AACA,kBAAQ,QAAQ,eAAe;AAAA,QACjC;AAAA,MACF;AAAA,IAAA;AAOO,aAAA,cAAc,MAAe,kBAAkB,MAAM;AAC5D,UAAI,MAAM;AACR,aAAK,cAAc,SAAS,cAAc,UAAU,WAAc,CAAC,QAAQ,OAAO;AACtE,oBAAA,MAAM,EAAE,uCAAuC,CAAC;AAC1D;AAAA,QACF;AAEA,uBAAe,QAAQ,QAAQ;AACzB,cAAA,sBAAsB,eAAe,KAAK;AAAA,MAAA,OAC3C;AAEL,gBAAQ,QAAQ,eAAe;AAAA,MACjC;AAEA,UAAI,iBAAiB;AACnB,sBAAc,KAAK;AAAA,MACrB;AAAA,IACF;AAKA,mBAAe,cAAc,UAAmB;AAC9C,UAAI,MAAM,OAAO,uBAAuB,CAAC,OAAO,OAAO;AACrD,eAAO,QAAQ,MAAM,MAAM,OAAO,oBAAoB;AAAA,MAAA,OACjD;AACL,eAAO,QAAQ;AAAA,MACjB;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}