fix:提示框样式修改

CHANGELOG.md

+## 2023-01-18
+
+- 提示框样式修改
+
 ## 2023-01-15
 
 - 树拖动排序

src/components/dialog-tip/DialogTip.vue

+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import ICON from 'src/config/icons';
+
+defineProps({
+  // ...your custom props
+  text: {
+    type: String,
+    default: '',
+  },
+  // Color name for component from the Quasar Color Palette
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  showActions: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+defineEmits([
+  // REQUIRED; need to specify some events that your
+  // component will emit through useDialogPluginComponent()
+  ...useDialogPluginComponent.emits,
+]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+
+// this is part of our example (so not required)
+function onOKClick() {
+  // on OK, it is REQUIRED to
+  // call onDialogOK (with optional payload)
+  onDialogOK();
+  // or with payload: onDialogOK({ ... })
+  // ...and it will also hide the dialog automatically
+}
+</script>
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin">
+      <!--
+        ...content
+        ... use q-card-section for it?
+      -->
+      <q-card-section class="my-card-section">
+        <div class="text-h6">
+          <q-icon :name="ICON.info" :color="color" />提示
+        </div>
+      </q-card-section>
+
+      <q-card-section
+        class="my-card-content"
+        :style="{ minHeight: showActions ? '40px' : '70px' }"
+      >
+        {{ text }}
+      </q-card-section>
+
+      <!-- buttons example -->
+      <q-card-actions align="right" v-if="showActions">
+        <q-btn :color="color" flat label="取消" @click="onDialogCancel" />
+        <q-btn :color="color" unelevated label="确定" @click="onOKClick" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style lang="scss" scoped>
+.q-dialog-plugin {
+  //   border: 1px solid red;
+}
+.my-card-section {
+  padding: 16px;
+  i {
+    font-size: 22px;
+    margin-right: 6px;
+  }
+}
+.my-card-content {
+  padding: 16px;
+  padding-top: 0;
+}
+</style>

src/components/index.ts

@@ -14,6 +14,7 @@ import UpLoader from './uploader-page/UpLoader.vue';
 import AgGridNoRowsComponent from './ag-grid/NoRowsOverlayComponent.vue';
 import AgGridLoadingOverlayComponent from './ag-grid/LoadingOverlayComponent.vue';
 import AgGridDateComponent from './ag-grid/DateComponent.vue';
+import DialogTip from './dialog-tip/DialogTip.vue';
 
 export {
   DateTimePick as ComDateTimePick,
@@ -31,6 +32,7 @@ export {
   AgGridNoRowsComponent as ComAgGridNoRowsComponent,
   AgGridLoadingOverlayComponent as ComAgGridLoadingOverlayComponent,
   AgGridDateComponent as ComAgGridDateComponent,
+  DialogTip as ComDialogTip,
 };
 
 export default {
@@ -49,4 +51,5 @@ export default {
   AgGridNoRowsComponent,
   AgGridLoadingOverlayComponent,
   AgGridDateComponent,
+  DialogTip,
 };

src/css/quasar.variables.scss

@@ -19,7 +19,10 @@ $padding-md: $space-base;
 $padding-lg: ($space-base * 1.5);
 $padding-xl: ($space-base * 3);
 
-$primary: #78c0a8;
+// $primary: #78c0a8;
+$primary: rgba(116, 194, 225, 1);
+$primary-bg-light: rgba(116, 194, 225, 0.125);
+
 $secondary: #26a69a;
 $accent: #9c27b0;
 
@@ -45,7 +48,11 @@ $primary-3: mix($--color-white, $primary, 20%);
 $primary-2: mix($--color-white, $primary, 30%);
 $primary-1: mix($--color-white, $primary, 50%);
 
-$primary-bg-light: rgba(120, 192, 168, 0.136);
+$primary-light-1: mix($--color-white, $primary, 60%);
+$primary-light-2: mix($--color-white, $primary, 70%);
+$primary-light-3: mix($--color-white, $primary, 80%);
+$primary-light-4: mix($--color-white, $primary, 90%);
+
 .bg-primary-bg-light {
   background: $primary-bg-light;
 }

src/modules/page5/element/table/CellAction.vue

@@ -2,6 +2,8 @@
 // import { reactive } from 'vue';
 import { useQuasar } from 'quasar';
 import ICON from 'src/config/icons';
+import CustomComponent from 'src/components/dialog-tip/DialogTip.vue';
+
 import emitter from '../../eventbus';
 
 const props = defineProps<{
@@ -11,16 +13,36 @@ const props = defineProps<{
 const $q = useQuasar();
 
 function delRow() {
-  const msg = `确定<strong>删除</strong>当前行<span class="text-warning text-weight-bold">${props.params.data.name}</span>？`;
+  // const msg = `确定<strong>删除</strong>当前行<span class="text-warning text-weight-bold">${props.params.data.name}</span>？`;
+  // $q.dialog({
+  //   title: '<i class="bi bi-exclamation-circle text-warning"></i>&nbsp;提示',
+  //   message: msg,
+  //   cancel: true,
+  //   persistent: true,
+  //   html: true,
+  // }).onOk(() => {
+  //   emitter.emit('delRow', props.params);
+  // });
+
   $q.dialog({
-    title: '<i class="bi bi-exclamation-circle text-warning"></i>&nbsp;提示',
-    message: msg,
-    cancel: true,
-    persistent: true,
-    html: true,
+    component: CustomComponent,
+    // props forwarded to your custom component
+    componentProps: {
+      // persistent: true,
+      text: '数据已上传至云端，无法删除',
+      color: 'warning',
+      showActions: false,
+      // ...more..props...
+    },
   }).onOk(() => {
     emitter.emit('delRow', props.params);
   });
+  // .onCancel(() => {
+  //   console.log('Cancel');
+  // })
+  // .onDismiss(() => {
+  //   console.log('Called on OK or Cancel');
+  // });
 }
 </script>
 <template>

src/modules/page5/element/table/CellFirstCol.vue

@@ -20,6 +20,6 @@ const props = defineProps<{
   //   border-color: var(--ag-border-color);
   font-size: 13px;
   font-weight: 700;
-  color: var(--ag-header-foreground-color);
+  // color: var(--ag-header-foreground-color);
 }
 </style>

src/modules/page5/element/table/CustomHeader.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import emitter from '../../eventbus';
 import ICONS from 'src/config/icons';
+import { ComDialogTip } from 'src/components';
 const props = defineProps<{
   params: any;
 }>();
@@ -13,14 +14,13 @@ const prompt = ref(false);
 const msg = ref(null);
 
 function delCol() {
-  const msg = `确定<strong>删除</strong>当前列<span class="text-red text-weight-bold">${props.params.displayName}</span>？`;
-
   $q.dialog({
-    title: '<i class="bi bi-exclamation-circle text-warning"></i>&nbsp;提示',
-    message: msg,
-    cancel: true,
-    persistent: true,
-    html: true,
+    component: ComDialogTip,
+    componentProps: {
+      persistent: true,
+      text: `确定删除当前列 ${props.params.displayName}`,
+      color: 'negative',
+    },
   }).onOk(() => {
     emitter.emit('delCol', props.params);
   });