{"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      <!-- 编辑行时才能在 cell 中触发变更 -->\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      <!-- datePicker timePicker 需要单独处理 -->\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}