im_manager/web/src/views/imTenant/edit.vue

<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      :title="formValue.id > 0 ? '编辑IM商户 #' + formValue.id : '添加IM商户'"
      :style="{
        width: dialogWidth,
      }"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :model="formValue"
            :rules="rules"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            :label-width="110"
            class="py-4"
          >
            <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
              <n-gi span="1">
                <n-form-item label="商户编码" path="code">
                  <n-input placeholder="请输入商户编码" v-model:value="formValue.code" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="商户名称" path="name">
                  <n-input placeholder="请输入商户名称" v-model:value="formValue.name" />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="状态" path="state">
                  <n-select
                    v-model:value="formValue.state"
                    :options="stateOptions"
                    placeholder="请选择状态"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="业务库名" path="dbName">
                  <n-input placeholder="请输入业务库名" v-model:value="formValue.dbName" />
                </n-form-item>
              </n-gi>
              <n-gi span="2">
                <n-form-item label="独立连接串" path="dbDsn">
                  <n-input
                    type="textarea"
                    placeholder="为空时使用业务库名路由"
                    v-model:value="formValue.dbDsn"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="最大用户" path="maxUsers">
                  <n-input-number
                    placeholder="0 表示不限"
                    :min="0"
                    v-model:value="formValue.maxUsers"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="最大群组" path="maxGroups">
                  <n-input-number
                    placeholder="0 表示不限"
                    :min="0"
                    v-model:value="formValue.maxGroups"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="群成员上限" path="maxGroupMembers">
                  <n-input-number
                    placeholder="0 表示不限"
                    :min="0"
                    v-model:value="formValue.maxGroupMembers"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="阿里云内容审核" path="aliyunModerationEnabled">
                  <n-switch
                    v-model:value="formValue.aliyunModerationEnabled"
                    :checked-value="1"
                    :unchecked-value="0"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="本地内容审核" path="localModerationEnabled">
                  <n-switch
                    v-model:value="formValue.localModerationEnabled"
                    :checked-value="1"
                    :unchecked-value="0"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="实名审核方式" path="realnameReviewPolicy">
                  <n-select
                    v-model:value="formValue.realnameReviewPolicy"
                    :options="realnameReviewPolicyOptions"
                    placeholder="请选择实名审核方式"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="2">
                <n-form-item label="商户描述" path="tenantDesc">
                  <n-input
                    type="textarea"
                    placeholder="请输入商户描述"
                    v-model:value="formValue.tenantDesc"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>
          </n-form>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm">取消</n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useDictStore } from '@/store/modules/dict';
  import { Add, Edit, View } from '@/api/imTenant';
  import { newState, rules, State } from './model';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useMessage } from 'naive-ui';
  import { adaModalWidth } from '@/utils/hotgo';

  const emit = defineEmits(['reloadTable']);
  const message = useMessage();
  const settingStore = useProjectSettingStore();
  const dict = useDictStore();
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref<State>(newState(null));
  const formRef = ref<any>({});
  const formBtnLoading = ref(false);
  const dialogWidth = computed(() => {
    return adaModalWidth(840);
  });
  const stateOptions = dict.getOption('ImTenantStateOptions');
  const realnameReviewPolicyOptions = [
    { label: '不自动审核', value: 0 },
    { label: '自动审核，失败后转人工', value: 1 },
  ];

  // 提交表单
  function confirmForm(e) {
    e.preventDefault();
    formRef.value.validate((errors) => {
      if (!errors) {
        formBtnLoading.value = true;
        const submit = formValue.value.id > 0 ? Edit : Add;
        submit(formValue.value)
          .then((_res) => {
            message.success('操作成功');
            closeForm();
            emit('reloadTable');
          })
          .finally(() => {
            formBtnLoading.value = false;
          });
      } else {
        message.error('请填写完整信息');
      }
    });
  }

  // 关闭表单
  function closeForm() {
    showModal.value = false;
    loading.value = false;
  }

  // 打开模态框
  function openModal(state: State) {
    showModal.value = true;

    if (!state || state.id < 1) {
      formValue.value = newState(state);
      return;
    }

    loading.value = true;
    View({ id: state.id })
      .then((res) => {
        formValue.value = newState(res);
      })
      .finally(() => {
        loading.value = false;
      });
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less"></style>