初始化

刘光辉

7 小时以前 0dfe84494048ce27ba8449831782128412d3eb13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script lang="ts" setup>
  import { storeToRefs } from 'pinia';
 
  import { useJnpfUniverStore } from '../../../store';
 
  defineOptions({ name: 'JnpfUniverDialogSelectCell' });
 
  const props = defineProps<PropsType>();
  interface PropsType {
    value: string;
  }
  const jnpfUniverStore = useJnpfUniverStore(props?.value);
  const { dialogSelectCellDataCache } = storeToRefs(jnpfUniverStore);
 
  // 点击取消
  const handleCancel = () => {
    jnpfUniverStore?.cancelDialogSelectCell();
  };
 
  // 点击确认
  const handleConfirm = () => {
    jnpfUniverStore?.confirmDialogSelectCell();
  };
</script>
 
<template>
  <div class="dialog-select-cell-content">
    <div>
      <div class="univer-mb-2 univer-flex univer-items-center univer-gap-4">
        <span
          class="univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md univer-w-full univer-border-primary-600"
          style="width: 100%">
          <input
            type="text"
            placeholder="请选择"
            readonly
            class="univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200 placeholder:univer-text-gray-400 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50 dark:!univer-bg-gray-700 dark:!univer-text-white dark:focus:!univer-ring-primary-900 univer-h-8 univer-px-2 univer-text-sm univer-border-gray-200 dark:!univer-border-gray-600 univer-border-solid univer-border"
            :value="dialogSelectCellDataCache" />
        </span>
      </div>
    </div>
    <footer class="univer-flex univer-gap-2" style="display: flex; justify-content: flex-end; margin-top: 20px">
      <button
        class="univer-box-border univer-inline-flex univer-cursor-pointer univer-select-none univer-items-center univer-justify-center univer-gap-2 univer-whitespace-nowrap univer-rounded-md univer-border univer-border-solid univer-text-sm univer-font-medium univer-transition-colors disabled:univer-pointer-events-none disabled:univer-cursor-not-allowed disabled:univer-opacity-50 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0 univer-border-gray-200 univer-bg-white univer-text-gray-700 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-white dark:hover:!univer-bg-gray-600 dark:active:!univer-bg-gray-700 univer-h-8 univer-rounded-lg univer-px-2 univer-text-sm"
        @click="handleCancel">
        取消
      </button>
      <button
        class="univer-box-border univer-inline-flex univer-cursor-pointer univer-select-none univer-items-center univer-justify-center univer-gap-2 univer-whitespace-nowrap univer-rounded-md univer-border univer-border-solid univer-text-sm univer-font-medium univer-transition-colors disabled:univer-pointer-events-none disabled:univer-cursor-not-allowed disabled:univer-opacity-50 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0 univer-border-primary-600 univer-bg-primary-600 univer-text-white hover:univer-bg-primary-500 active:univer-bg-primary-700 univer-h-8 univer-rounded-lg univer-px-2 univer-text-sm"
        :disabled="!dialogSelectCellDataCache"
        style="margin-left: 10px"
        @click="handleConfirm">
        确认
      </button>
    </footer>
  </div>
</template>