push

lib/saas/view/config/configSwitch.vue

@@ -0,0 +1,71 @@
+<!-- @format -->
+
+<template>
+  <div class="switchAlign">
+    <a-switch
+      v-model:checked="checked"
+      :checkedValue="1"
+      :unCheckedValue="0"
+      @click="changeBool()" />
+    <span v-if="configValue.expectedValue == 1 ? true : false">开</span>
+    <span v-else>关</span>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, createVNode } from 'vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { Modal } from 'ant-design-vue';
+  export default defineComponent({
+    components: {
+      ExclamationCircleOutlined,
+    },
+    props: {
+      configValue: {
+        type: Object,
+      },
+      index: {
+        type: Number,
+      },
+      listKey: {
+        type: String,
+      },
+    },
+    emits: ['changeSwitch', 'blur'],
+    setup(props, ctx) {
+      let checked = ref<Boolean>(props.configValue.expectedValue);
+      //改变开关状态
+      const changeBool = () => {
+        // console.log('changeBool');
+        Modal.confirm({
+          title: '警告',
+          icon: createVNode(ExclamationCircleOutlined),
+          content: '确定要将进行此项操作?',
+          onOk() {
+            let value = {
+              configValue: checked.value,
+              index: props.index,
+              key: props.listKey,
+            };
+            ctx.emit('changeSwitch', value);
+          },
+          onCancel() {
+            checked.value = props.configValue.expectedValue;
+          },
+        });
+      };
+      return {
+        changeBool,
+        checked,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .switchAlign {
+    display: flex;
+    align-items: center;
+    span {
+      padding-left: 10px;
+    }
+  }
+</style>