plus-ui/src/views/set/message.vue

<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="search">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="消息标题">
            <el-input v-model="queryParams.title" placeholder="请输入消息标题" />
          </el-form-item>
          <el-form-item label="发送内容">
            <el-input v-model="queryParams.content" placeholder="请输入发送内容" />
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker v-model="queryParams.startTime" type="date" placeholder="开始时间" />至
            <el-date-picker v-model="queryParams.sendTime" type="date" placeholder="结束时间" />
          </el-form-item>
          <el-form-item label="发送类型">
            <el-select v-model="queryParams.subType" placeholder="请选择发送类型">
              <!-- 这里需要根据实际的发送类型选项添加 el-option -->
              <el-option label="关注" value="0" />
              <el-option label="系统" value="1" />
              <el-option label="互动" value="2" />
              <el-option label="订单" value="3" />
              <el-option label="通知" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <!-- <el-button type="primary"  @click="handleAdd" v-hasPermi="['oms:orderDeliveryHistory:add']">新增</el-button> -->
            <el-button type="primary" plain icon="Plus" @click="showRefuteDialog = true">发送信息</el-button>
          </el-col>
        </el-row>
      </template>
      <el-table
        ref="categoryTableRef"
        :data="messList"
        row-key="categoryId"
        border
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="id" prop="id" align="center" width="180" />
        <el-table-column label="发送者ID" prop="senderId" align="center" width="150" />
        <el-table-column label="标题" prop="title" align="center" width="150" />
        <el-table-column label="内容" prop="content" align="center" width="150" />
        <el-table-column label="创建时间" prop="createTime" align="center" width="200" />
        <!-- <el-table-column label="定时发送时间" prop="scheduledTime" align="center" width="200" /> -->
        <!-- <el-table-column label="触发类型" prop="title" align="center" width="150">
        <template #default="{ row }">
          {{ row.msgType == 1 ? '手动' : '自动' }}
        </template>
      </el-table-column> -->
        <el-table-column label="消息类型" prop="title" align="center" width="150">
          <template #default="{ row }">
            {{ isSub[row.subType] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="撤回" placement="top">
              <el-button link type="primary" v-hasPermi="['workflow:video:remove']">撤回</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <pagination v-if="total > 0" :total="total" v-model:page="queryParams.current" v-model:limit="queryParams.size" @pagination="getlist" />
      </div>
    </el-card>
    <el-dialog v-model="showRefuteDialog" title="消息发送" @close="clearFormData">
      <el-form :model="dataparams" :rules="rules">
        <el-form-item label="模板名称">
          <!-- <el-input v-model="dataparams.title" placeholder="请输入标题" /> -->
          <el-select
            v-model="dataparams.templateId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入模板名称"
            :remote-method="idMethod"
            :loading="idloading"
          >
            <el-option v-for="item in idoptions" :key="item.id" :label="item.templateName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="指定">
          <el-button @click="islofun(1)" :style="{ background: dataparams.logmess == 1 ? '#FFB6C1' : '' }">{{ '指定角色' }}</el-button>
          <el-button @click="islofun(2)" :style="{ background: dataparams.logmess == 2 ? '#FFB6C1' : '' }">{{ '指定用户' }}</el-button>
          <!-- <el-button @click="dataparams.logmess = 3" :style="{ background: dataparams.logmess == 3 ? '#FFB6C1' : '' }">{{ '指定群' }}</el-button> -->
        </el-form-item>

        <el-form-item label="手机号/名称" v-show="dataparams.logmess == 2">
          <el-select
            v-model="dataparams.sendScope"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入手机号/名称"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option v-for="item in options" :key="item.userId" :label="item.nickName" :value="item.userName" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="群名称" v-show="dataparams.logmess == 3">
          <el-select
            v-model="dataparams.sendScope"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入群名称"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option v-for="item in options" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="指定角色" v-show="dataparams.logmess == 1">
          <el-select v-model="fncode" placeholder="请选择角色" @change="getlistdata">
            <el-option v-for="(item, index) in sendScopelist" :label="item.label" :value="item.value" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送类型">
          <el-select v-model="dataparams.subType" placeholder="请选择发送类型">
            <!-- 这里需要根据实际的发送类型选项添加 el-option -->
            <el-option label="关注" value="0" />
            <el-option label="系统" value="1" />
            <el-option label="互动" value="2" />
            <el-option label="订单" value="3" />
            <el-option label="通知" value="4" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="手自动时间">
          <el-date-picker v-model="dataparams.scheduledTime" type="datetime" placeholder="请输入自动发送时间" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button @click="showRefuteDialog = false">取消</el-button> -->
          <el-button type="primary" @click="cilcikgAdd">发送</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Leave" lang="ts">
import { listlist, listAdd, listuserlist, listtemplate, templateSelect } from '@/api/set/messageindex';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
import { LeaveForm, LeaveQuery, LeaveVO, LeaveListVO, optionListItem, AccountOV } from '@/api/set/messagetype';
const data = reactive<PageData<LeaveForm, LeaveQuery>>({
  form: {},
  queryParams: {
    current: 1,
    size: 10,
    title: null,
    content: null,
    sendTime: null,
    startTime: null,
    subType: null
  },
  rules: {}
});
const isExpandAll = ref(true);
const { queryParams } = toRefs(data);
const messList = ref<LeaveVO[]>([]);
const total = ref(0);
const showRefuteDialog = ref<boolean>(false);
const getlist = async () => {
  const res = await listlist(queryParams.value);
  if (res.code == 200) {
    messList.value = res.data.records;
    total.value = res.data.total;
  }
};
const islofun = (e: any) => {
  dataparams.value.logmess = e;
  fncode.value = '';
  dataparams.value.sendScope = null;
};
const resetQuery = () => {
  queryParams.value = {
    title: null,
    content: null,
    sendTime: null,
    startTime: null,
    subType: null
  };
  getlist();
};
const isSub = ref({
  0: '关注',
  1: '系统',
  2: '互动',
  3: '订单',
  4: '通知'
});
const fncode = ref('');
const dataparams = ref<LeaveListVO>({
  sendScope: null,
  templateId: null,
  subType: null,
  scheduledTime: null,
  logmess: 1 // 1:角色 2:用户  3:群聊
});
const getlistdata = async (e: any) => {
  dataparams.value.sendScope = [e];
};
const rules = reactive({
  id: [{ required: false, message: '请输入', trigger: 'blur' }],
  sendScope: [{ required: true, message: '请输入内容', trigger: 'blur' }]
});
const handleQuery = () => {
  getlist();
};
const sendScopelist = ref([
  { label: '全部', value: 'all' },
  { label: '达人', value: 'expert' },
  { label: '商户', value: 'merchant' },
  { label: '用户', value: 'user' }
]);
//发送消息
const cilcikgAdd = async () => {
  const res = await listAdd(dataparams.value);
  if (res.code == 200) {
    dataparams.value = {
      sendScope: null,
      templateId: null,
      subType: null,
      scheduledTime: null,
      logmess: 1 // 1:角色 2:用户  3:群聊
    };
    fncode.value = '';
    showRefuteDialog.value = false;
    getlist();
  }
};
const clearFormData = () => {
  fncode.value = '';
  dataparams.value = {
    sendScope: null,
    subType: null,
    templateId: null,
    scheduledTime: null,
    logmess: 1 // 1:角色 2:用户  3:群聊
  };
};
const options = ref<optionListItem[]>([]);
const valuefn = ref<string | number>('');
const loading = ref(false);
interface ListItem {
  value: string;
  label: string;
}
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    setTimeout(async () => {
      loading.value = false;
      const res = await listuserlist(query);
      options.value = res.data;
    }, 200);
  } else {
    options.value = [];
  }
};
//查询模板
const idloading = ref(false);
interface ListItemoptions {
  id: string | number;
  status: string;
  templateContent: string;
  templateName: string;
  templateType: string;
}
const idoptions = ref<ListItemoptions[]>([]);
const idMethod = (query: string) => {
  if (query) {
    idloading.value = true;
    setTimeout(async () => {
      idloading.value = false;
      const res = await templateSelect(query);
      idoptions.value = res.data;
    }, 200);
  } else {
    idoptions.value = [];
  }
};

// const monge = ref<AccountOV[]>([]);
// const getaccountlist = async () => {
//   const res = await listtemplate();
//   console.log(res);
//   if (res.code == 200) {
//     monge.value = res.data.records;
//   }
// };
onMounted(() => {
  getlist();
  // getaccountlist();
});
</script>