- <template>
- <div class="app-container">
- <el-form
- :model="queryParams"
- ref="queryRef"
- :inline="true"
- v-show="showSearch"
- label-width="110px"
- >
- <!-- <el-form-item label="模板id" prop="robotId">
- <el-input
- v-model="queryParams.robotId"
- placeholder="请输入模板id"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item> -->
- <el-form-item label="模板名称" prop="robotName">
- <el-input
- v-model="queryParams.robotName"
- placeholder="请输入模板名称"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
-
- <!-- <el-form-item label="模板内容" prop="templateDesc">
- <el-input
- v-model="queryParams.templateDesc"
- placeholder="请输入模板内容"
- clearable
- @keyup.enter="handleQuery"
- />
- </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-button
- type="primary"
- plain
- icon="Plus"
- @click="handleAdd"
- v-hasPermi="['outcall:unitVoiceTemplate:add']"
- >新增</el-button> -->
-
- <el-button
- type="success"
- plain
- icon="Edit"
- :disabled="single"
- @click="handleUpdate"
- v-hasPermi="['outcall:unitVoiceTemplate:edit']"
- >修改</el-button
- >
- <el-button
- type="danger"
- plain
- icon="Delete"
- :disabled="multiple"
- @click="handleDelete"
- v-hasPermi="['outcall:unitVoiceTemplate:remove']"
- >删除</el-button
- >
- <el-button type="warning" plain icon="Refresh" @click="synchronization"
- >同步</el-button
- >
- </el-form-item>
- </el-form>
-
- <el-table
- v-loading="loading"
- :data="unitVoiceTemplateList"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="index" width="55" align="center" prop="序号" />
- <el-table-column type="selection" width="55" align="center" />
- <!-- <el-table-column label="模板id" align="center" prop="robotId" /> -->
- <el-table-column label="模板名称" align="center" prop="robotName" />
- <el-table-column label="类型" align="center" prop="callType">
- <template #default="scope">
- {{ scope.row.callType == 1 ? "呼入" : scope.row.callType == 3 ? "呼出" : "" }}
- </template>
- </el-table-column>
- <el-table-column label="发布状态" align="center" prop="callTypeValue">
- <!-- <template #default="scope">
- {{scope.row.publishState==1?'未发布':scope.row.publishState==2?'发布中':scope.row.publishState==3?'发布成功':scope.row.publishState==4?'发布失败':''}}
- </template> -->
- </el-table-column>
- <el-table-column label="模板内容" align="center" prop="templateDesc">
- <template #default="scope">
- {{ scope.row.remark }}
- </template>
- </el-table-column>
- <!-- <el-table-column label="备注" align="center" prop="remark" />
- <el-table-column label="状态" align="center" prop="status" /> -->
- <el-table-column
- label="操作"
- align="center"
- class-name="small-padding fixed-width"
- width="230px"
- >
- <template #default="scope">
- <el-button link type="warning" plain icon="Phone" @click="testClick(scope.row)"
- >测试外呼</el-button
- >
- <el-button
- link
- type="warning"
- icon="Edit"
- @click="handleUpdate(scope.row)"
- v-hasPermi="['outcall:unitVoiceTemplate:edit']"
- >修改</el-button
- >
- <el-button
- link
- type="danger"
- icon="Delete"
- @click="handleDelete(scope.row)"
- v-hasPermi="['outcall:unitVoiceTemplate:remove']"
- >删除</el-button
- >
- <!-- <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['outcall:unitVoiceTemplate:view']">详情</el-button> -->
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 添加或修改语音外呼-模板信息对话框 -->
- <el-dialog :title="title" v-model="open" width="600px" append-to-body>
- <el-form
- ref="unitVoiceTemplateRef"
- :model="form"
- :rules="rules"
- label-width="150px"
- >
- <!-- <el-form-item label="模板id" prop="robotId">
- <el-input v-model="form.robotId" placeholder="请输入模板id" />
- </el-form-item> -->
- <el-form-item label="模板名称" prop="robotName">
- <el-input disabled v-model="form.robotName" placeholder="请输入模板名称" />
- </el-form-item>
- <el-form-item
- v-for="(item, key) in compileTemplate"
- :key="key"
- :label="`业务变量${key}`"
- :prop="item[key]"
- >
- <el-input v-model="compileTemplate[key]" />
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
-
- <!-- 语音外呼-模板信息详情 -->
- <el-dialog
- title="语音外呼-模板信息详情"
- v-model="detailOpen"
- width="800px"
- append-to-body
- class="dialog-detail-box"
- >
- <div class="dialog-form-detail flex flex-r flex-wrap">
- <!-- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">模板id</div>
- <div class="detail-value flex flex-align-center">
- {{dialogFormDetail.robotId}}
- </div>
- </div> -->
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">模板名称</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.robotName }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">1-呼入,3-呼出</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.callType }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">
- 发布状态,1-未发布,2-发布中,3-发布成功,4-发布失败
- </div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.publishState }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">模板内容</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.templateDesc }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">备注</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.remark }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">状态</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.status }}
- </div>
- </div>
- </div>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="cancel">关 闭</el-button>
- </div>
- </template>
- </el-dialog>
- <!-- 测试外呼 -->
- <el-dialog title="测试外呼" v-model="testModel" width="600px" append-to-body>
- <el-form
- ref="testRef"
- :model="testForm"
- :rules="testRules"
- label-width="150px"
- v-loading="testloading"
- >
- <!-- <el-form-item label="模板id" prop="robotId">
- <el-input v-model="form.robotId" placeholder="请输入模板id" />
- </el-form-item> -->
- <el-form-item label="手机号" prop="phones">
- <el-input
- v-model="testForm.phones"
- placeholder="请输入手机号,多个手机号用逗号隔开"
- />
- </el-form-item>
- <el-form-item
- v-for="(item, key) in conTemplate"
- :key="key"
- :label="`业务变量${key}`"
- :prop="item[key]"
- >
- <el-input v-model="conTemplate[key]" />
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="testSubmit">确 定</el-button>
- <el-button @click="testCancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="UnitVoiceTemplate">
- import {
- pageunitVoiceTemplate,
- getunitVoiceTemplate,
- delunitVoiceTemplate,
- addunitVoiceTemplate,
- updateunitVoiceTemplate,
- unitVoiceTemplateSync,
- unitVoiceTemplateCall,
- } from "@/api/OutgoingCall/templateList";
- import { ref } from "vue";
-
- const { proxy } = getCurrentInstance();
-
- const unitVoiceTemplateList = ref([]);
- const open = ref(false);
- const loading = ref(true);
- const showSearch = ref(true);
- const ids = ref([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const title = ref("");
- const detailOpen = ref(false);
-
- const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- robotId: null,
- robotName: null,
- callType: null,
- publishState: null,
- templateDesc: null,
- status: null,
- },
- rules: {
- // templateDesc: [{ required: true, message: "模板内容不能为空", trigger: "blur" }
- // ],
- },
- dialogFormDetail: {}, //详情弹框数据
- });
-
- const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
-
- /** 查询语音外呼-模板信息列表 */
- function getList() {
- loading.value = true;
- pageunitVoiceTemplate(queryParams.value).then((response) => {
- unitVoiceTemplateList.value = response.data;
- total.value = response.total;
- loading.value = false;
- });
- }
-
- // 取消按钮
- function cancel() {
- open.value = false;
- detailOpen.value = false;
- reset();
- }
-
- // 表单重置
- function reset() {
- form.value = {
- id: null,
- robotId: null,
- robotName: null,
- callType: null,
- publishState: null,
- templateDesc: null,
- remark: null,
- status: null,
- delFlag: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- };
- proxy.resetForm("unitVoiceTemplateRef");
- }
-
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
- }
-
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm("queryRef");
- handleQuery();
- }
-
- // 多选框选中数据
- function handleSelectionChange(selection) {
- ids.value = selection.map((item) => item.id);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
- }
-
- /** 新增按钮操作 */
- function handleAdd() {
- reset();
- open.value = true;
- title.value = "添加语音外呼-模板信息";
- }
- const compileTemplate = ref(null);
-
- /** 修改按钮操作 */
- function handleUpdate(row) {
- reset();
- const _id = row.id || ids.value;
- getunitVoiceTemplate(_id).then((response) => {
- form.value = response.data;
- compileTemplate.value = JSON.parse(response.data.templateDesc);
- open.value = true;
- title.value = "修改语音外呼-模板信息";
- });
- }
-
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs["unitVoiceTemplateRef"].validate((valid) => {
- if (valid) {
- console.log("form", form.value);
- console.log("compileTemplate", compileTemplate.value);
- form.value.templateDesc = JSON.stringify(compileTemplate.value);
- updateunitVoiceTemplate(form.value).then((response) => {
- proxy.$modal.msgSuccess("修改成功");
- open.value = false;
- getList();
- });
- }
- });
- }
-
- /** 删除按钮操作 */
- function handleDelete(row) {
- proxy.$modal
- .confirm('是否确认删除模板"' + row.robotName + '"的数据项?')
- .then(function () {
- return delunitVoiceTemplate(row.id);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess("删除成功");
- })
- .catch(() => {});
- }
-
- //查看详情操作
- function handleDetail(row) {
- detailOpen.value = true;
- dialogFormDetail.value = row;
- }
- // 同步
- function synchronization() {
- loading.value = true;
- unitVoiceTemplateSync().then((res) => {
- console.log("res", res);
- loading.value = false;
-
- if (res.code == 200) {
- proxy.$modal.msgSuccess("同步成功");
- getList();
- } else {
- proxy.$modal.warning("同步失败");
- }
- });
- }
- // 测试外呼
- const testModel = ref(false);
- const testForm = ref({
- robotId: "",
- phones: "",
- });
- const conTemplate = ref({});
- const testloading = ref(false);
-
- const testRules = ref({
- phones: [
- { required: true, message: "请输入手机号,多个手机号用逗号隔开", trigger: "blur" },
- ],
- });
-
- function testClick(row) {
- testModel.value = true;
- conTemplate.value = JSON.parse(row.templateDesc);
- console.log("conTemplate.value", conTemplate.value);
- testForm.value.robotId = row.robotId;
- }
- /** 测试外呼提交按钮 */
- function testSubmit() {
- proxy.$refs["testRef"].validate((valid) => {
- if (valid) {
- testloading.value = true;
- console.log("conTemplate.value", conTemplate.value);
- let text = conTemplate.value;
- console.log("text", text);
- let params = {
- robotId: testForm.value.robotId,
- phones: testForm.value.phones,
- templateDesc: text,
- };
- unitVoiceTemplateCall(params).then((response) => {
- testloading.value = false;
-
- proxy.$modal.msgSuccess("发送成功");
- testModel.value = false;
- });
- }
- });
- }
-
- // 测试外呼取消按钮
- function testCancel() {
- testModel.value = false;
- testForm.value = {
- phones: "",
- robotId: "",
- templateDesc: {},
- };
- proxy.resetForm("testRef");
- }
-
- getList();
- </script>