|
@@ -1,701 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="ivrContent layout-padding">
|
|
|
- <el-alert type="warning" :closable="false">
|
|
|
- <template #title>
|
|
|
- 鼠标右键新增、删除、编辑节点。点击节点查看节点更多信息。
|
|
|
- <el-switch v-model="horizontal" active-text="竖向" inactive-text="横向"></el-switch>
|
|
|
- <el-switch v-model="collapsable" active-text="可收起" inactive-text="不可收起"></el-switch>
|
|
|
- </template>
|
|
|
- </el-alert>
|
|
|
- <vue3-tree-org :data="state.data" :horizontal="horizontal" :collapsable="collapsable" v-loading="loading"
|
|
|
- :style="{ height: `calc(100vh - ${setViewHeight}` }" :label-style="style" :only-one-node="onlyOneNode"
|
|
|
- :default-expand-level="3" :props="{ id: 'id', pid: 'prevIvrNo', label: 'name', children: 'childIvrs' }"
|
|
|
- :clone-node-drag="cloneNodeDrag" :node-draggable="false" @on-contextmenu="onMenus"
|
|
|
- :define-menus="defineMenus" :toolBar="false"
|
|
|
- @node-add="addNode" @node-delete="nodeDelete" ref="vue3TreeOrg">
|
|
|
- <!-- 自定义节点内容 -->
|
|
|
- <template v-slot="{ node }">
|
|
|
- <el-popover placement="top-start" :width="200" trigger="click">
|
|
|
- <template #reference>
|
|
|
- <div class="tree-org-node__text node-label">ivr名称:{{ node.label }}</div>
|
|
|
- </template>
|
|
|
- <p>ivr名称:{{ node.label }}</p>
|
|
|
- <p>ivr编号:{{ node.$$data.no }}</p>
|
|
|
- <p>ivr结束符:{{ node.$$data.exit }}</p>
|
|
|
- <p>ivr按键长度:{{ node.$$data.infoLength }}</p>
|
|
|
- <p>ivr重复次数:{{ node.$$data.repeat }}</p>
|
|
|
- <p>ivr类型:{{ node.$$data.ivrTypeText }}</p>
|
|
|
- <p>ivr语音:{{ node.$$data.voice }}</p>
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
- </vue3-tree-org>
|
|
|
- <!-- 新增 -->
|
|
|
- <el-dialog v-model="drawerAdd" title="新增节点" draggable>
|
|
|
- <div class="form_content">
|
|
|
- <el-form :model="ruleFormAdd" ref="ruleFormRefAdd">
|
|
|
- <el-row :gutter="35">
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="ivr" prop="ivr" :rules="[{ required: true, message: '请选择ivr', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleFormAdd.ivr" placeholder="请选择ivr" value-key="id" class="w100" @change="chooseIvr">
|
|
|
- <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="策略类型" prop="ivrStrategeType" :rules="[{ required: true, message: '请选择策略类型', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleFormAdd.ivrStrategeType" placeholder="请选择策略类型" class="w100">
|
|
|
- <el-option v-for="item in ivrStrategeTypes" :key="item.key" :label="item.value"
|
|
|
- :value="item.key" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleFormAdd.ivrStrategeType === 1 || ruleFormAdd.ivrStrategeType === 3">
|
|
|
- <el-form-item label="按键输入" prop="input" :rules="[{ required: true, message: '请输入按键输入', trigger: 'blur' }]">
|
|
|
- <el-input v-model="ruleFormAdd.input" maxlength="1" placeholder="请输入按键输入" class="w100"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="响应类型" prop="ivrAnswerType"
|
|
|
- :rules="[{ required: true, message: '请选择响应类型', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleFormAdd.ivrAnswerType" placeholder="请选择响应类型" class="w100">
|
|
|
- <el-option v-for="item in ivrAnswerTypes" :key="item.key" :label="item.value"
|
|
|
- :value="item.key" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleFormAdd.ivrAnswerType === 1">
|
|
|
- <!-- 转语音选择ivr -->
|
|
|
- <el-form-item label="ivr" prop="ivrVoice"
|
|
|
- :rules="[{ required: true, message: '请选择ivr', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleFormAdd.ivrVoice" placeholder="请选择ivr" class="w100">
|
|
|
- <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleFormAdd.ivrAnswerType === 2">
|
|
|
- <!-- 转分机选择分机-->
|
|
|
- <el-form-item label="分机" prop="tels"
|
|
|
- :rules="[{ required: true, message: '请选择分机', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleFormAdd.tels" placeholder="请选择分机" class="w100">
|
|
|
- <el-option v-for="item in telsList" :key="item.id" :label="item.no" :value="item.no" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="ruleFormAdd.ivrAnswerType === 3">
|
|
|
- <!-- 转分机组 -->
|
|
|
- <el-form-item label="分机组" prop="telsGroup"
|
|
|
- :rules="[{ required: true, message: '请选择分机组', trigger: 'change' }]">
|
|
|
- <el-transfer v-model="ruleFormAdd.telsGroup" :titles="['选择语音文件', '按照选择顺序播放']" target-order="push"
|
|
|
- :data="telsGroup" :props="{
|
|
|
- key: 'no',
|
|
|
- label: 'name',
|
|
|
- }" :filterable="true">
|
|
|
- <template #default="{ option }">
|
|
|
- <span>{{ option.name }}</span>
|
|
|
- </template>
|
|
|
- </el-transfer>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleFormAdd.ivrAnswerType === 4">
|
|
|
- <!-- 转外部电话 -->
|
|
|
- <el-form-item label="外部电话" prop="phone"
|
|
|
- :rules="[{ required: true, message: '请输入外部电话', trigger: 'blur' }]">
|
|
|
- <el-input v-model="ruleFormAdd.phone" placeholder="请输入外部电话" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="语音文件" prop="voiceList" :rules="[{required: false,message: '选择语音文件',trigger: 'change'}]">
|
|
|
- <el-transfer v-model="ruleFormAdd.voiceList"
|
|
|
- :titles="['语音文件', '按照选择顺序播放']"
|
|
|
- target-order="push"
|
|
|
- :data="voiceList"
|
|
|
- :filterable="true">
|
|
|
- <template #default="{ option }">
|
|
|
- <span>{{ option.label }}</span>
|
|
|
- </template>
|
|
|
- </el-transfer>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="drawerAdd = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmitAdd">保存</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <!-- 编辑 -->
|
|
|
- <el-dialog v-model="drawer" :title="editTitle" draggable>
|
|
|
- <div class="form_content">
|
|
|
- <el-form :model="ruleForm" ref="ruleFormRef">
|
|
|
- <el-row :gutter="35">
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="策略类型" prop="ivrStrategeType"
|
|
|
- :rules="[{ required: true, message: '请选择策略类型', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleForm.ivrStrategeType" placeholder="请选择策略类型" class="w100">
|
|
|
- <el-option v-for="item in ivrStrategeTypes" :key="item.key" :label="item.value"
|
|
|
- :value="item.key" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleForm.ivrStrategeType === 1 || ruleForm.ivrStrategeType === 3">
|
|
|
- <el-form-item label="按键输入" prop="input" :rules="[{ required: true, message: '请输入按键输入', trigger: 'change' }]">
|
|
|
- <el-input v-model="ruleFormAdd.input" maxlength="1" placeholder="请输入按键输入" class="w100"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="响应类型" prop="ivrAnswerType" :rules="[{ required: true, message: '请选择响应类型', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleForm.ivrAnswerType" placeholder="请选择响应类型" class="w100">
|
|
|
- <el-option v-for="item in ivrAnswerTypes" :key="item.key" :label="item.value"
|
|
|
- :value="item.key" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleForm.ivrAnswerType === 1">
|
|
|
- <!-- 转语音选择ivr -->
|
|
|
- <el-form-item label="ivr" prop="ivrVoice" :rules="[{ required: true, message: '请选择ivr', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleForm.ivrVoice" placeholder="请选择ivr" class="w100">
|
|
|
- <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleForm.ivrAnswerType === 2">
|
|
|
- <!-- 转分机选择分机-->
|
|
|
- <el-form-item label="分机" prop="tels" :rules="[{ required: true, message: '请选择分机', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleForm.tels" placeholder="请选择分机" class="w100">
|
|
|
- <el-option v-for="item in telsList" :key="item.id" :label="item.no" :value="item.no" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="ruleForm.ivrAnswerType === 3">
|
|
|
- <!-- 转分机组 -->
|
|
|
- <el-form-item label="分机组" prop="telsGroup" :rules="[{ required: true, message: '请选择分机组', trigger: 'change' }]">
|
|
|
- <el-transfer v-model="ruleForm.telsGroup" :titles="['选择语音文件', '按照选择顺序播放']" target-order="push"
|
|
|
- :data="telsGroup" :props="{key: 'no',label: 'name',}" :filterable="true">
|
|
|
- <template #default="{ option }">
|
|
|
- <span>{{ option.name }}</span>
|
|
|
- </template>
|
|
|
- </el-transfer>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="ruleForm.ivrAnswerType === 4">
|
|
|
- <!-- 转外部电话 -->
|
|
|
- <el-form-item label="外部电话" prop="phone" :rules="[{ required: true, message: '请输入外部电话', trigger: 'blur' }]">
|
|
|
- <el-input v-model="ruleForm.phone" placeholder="请输入外部电话" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="语音文件" prop="voiceList" :rules="[{required: false,message: '选择语音文件',trigger: 'change'}]">
|
|
|
- <el-transfer v-model="ruleForm.voiceList"
|
|
|
- :titles="['语音文件', '按照选择顺序播放']"
|
|
|
- target-order="push"
|
|
|
- :data="voiceList"
|
|
|
- :filterable="true">
|
|
|
- <template #default="{ option }">
|
|
|
- <span>{{ option.label }}</span>
|
|
|
- </template>
|
|
|
- </el-transfer>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="drawer = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">保存</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <!-- 替换节点 -->
|
|
|
- <el-dialog v-model="isShowDialog" width="500px" draggable title="请选择要替换的节点">
|
|
|
- <el-form :model="ruleFormReplace" ref="ruleFormReplaceRef">
|
|
|
- <el-form-item label="需要替换的节点" prop="test" :rules="[{ required: true, message: '请选择需要替换的节点', trigger: 'change' }]">
|
|
|
- <el-select v-model="ruleFormReplace.test" value-key="id" placeholder="请选择需要替换的节点" class="w100" @change="replaceRoot">
|
|
|
- <el-option v-for="item in ivrListFilter" :key="item.id" :label="item.name" :value="item" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="isShowDialog = false" class="default-button">取 消</el-button>
|
|
|
- <el-button type="primary" @click="confrimReplace">保 存</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script lang="ts" setup name="ivrConfig">
|
|
|
-import { computed, nextTick, onUnmounted, onMounted, reactive, ref, toRefs, onActivated } from "vue";
|
|
|
-import { onBeforeRouteLeave, useRoute } from "vue-router"
|
|
|
-import { storeToRefs } from 'pinia';
|
|
|
-import { ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
|
|
|
-import { useThemeConfig } from '/@/stores/themeConfig';
|
|
|
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
|
|
-
|
|
|
-// 引入api
|
|
|
-import { getIvrTree, baseInfo, getIvrById, voicequerylist , addEditIvr,delIvrTree,replaceRootApi} from "/@/api/device/ivr"
|
|
|
-import { getTelsGroupList } from '/@/api/device/telsGroup';
|
|
|
-import { getTelsList } from '/@/api/device/tels';
|
|
|
-
|
|
|
-// 定义变量内容
|
|
|
-let cloneNodeDrag = ref(false);
|
|
|
-let state = reactive<any>({
|
|
|
- data: {},
|
|
|
- ivrAnswerTypes: [],
|
|
|
- ivrStrategeTypes: [],
|
|
|
- telsGroup: [],
|
|
|
- telsList:[],
|
|
|
- ruleFormReplace:{},
|
|
|
- ivrList:[],
|
|
|
- voiceList:[],
|
|
|
- ivrListFilter:[]
|
|
|
-})
|
|
|
-let ruleForm = reactive({ // 新增表单
|
|
|
- id:0,
|
|
|
- prevIvrNo:"",
|
|
|
- ivr:null,
|
|
|
- ivrStrategeType:null,
|
|
|
- input:"",
|
|
|
- ivrAnswerType:undefined as any,
|
|
|
- ivrVoice:"",
|
|
|
- tels:"",
|
|
|
- telsGroup:[],
|
|
|
- phone:"",
|
|
|
- voiceList:[]
|
|
|
-})
|
|
|
-let ruleFormAdd = reactive({ // 修改表单
|
|
|
- id:0,
|
|
|
- prevIvrNo:"",
|
|
|
- ivr:null,
|
|
|
- ivrStrategeType:null,
|
|
|
- input:"",
|
|
|
- ivrAnswerType:undefined as any,
|
|
|
- ivrVoice:"",
|
|
|
- tels:"",
|
|
|
- telsGroup:[],
|
|
|
- phone:"",
|
|
|
- voiceList:[]
|
|
|
-})
|
|
|
-const { ivrAnswerTypes, ivrStrategeTypes, telsGroup,telsList,ruleFormReplace,voiceList,ivrListFilter } = toRefs(state);
|
|
|
-const horizontal = ref(false)
|
|
|
-const collapsable = ref(true)
|
|
|
-const onlyOneNode = ref(false)
|
|
|
-const loading = ref(false)
|
|
|
-const storesThemeConfig = useThemeConfig();
|
|
|
-const stores = useTagsViewRoutes();
|
|
|
-const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
-const { isTagsViewCurrenFull } = storeToRefs(stores);
|
|
|
-const drawer = ref(false)
|
|
|
-const drawerAdd = ref(false)
|
|
|
-const editTitle = ref('')
|
|
|
-const style = reactive({
|
|
|
- background: "#fff",
|
|
|
- color: "#5e6d82",
|
|
|
-})
|
|
|
-const route = useRoute();
|
|
|
-const isShowDialog = ref(false);
|
|
|
-const defineMenus = (e:Event, node:any) => { //自定义菜单
|
|
|
- if(node.$$root){
|
|
|
- return [
|
|
|
- { name: '新建节点', command: 'addNode' },
|
|
|
- { name: '编辑节点', command: 'editNode' },
|
|
|
- { name: '替换节点', command: 'nodeReplace' }
|
|
|
- ]
|
|
|
- }else{
|
|
|
- return [
|
|
|
- { name: '新建节点', command: 'addNode' },
|
|
|
- { name: '编辑节点', command: 'editNode' },
|
|
|
- { name: '删除节点', command: 'nodeDelete' }
|
|
|
- ]
|
|
|
- }
|
|
|
-}
|
|
|
-const onMenus = ({ node, command, data }: any) => {// 点击菜单
|
|
|
- switch (command) {
|
|
|
- case 'editNode':
|
|
|
- editNode(node, data)
|
|
|
- break;
|
|
|
- case 'addNode':
|
|
|
- addNode(node, data)
|
|
|
- break;
|
|
|
- case 'nodeDelete':
|
|
|
- nodeDelete(node)
|
|
|
- break;
|
|
|
- case 'nodeReplace':
|
|
|
- nodeReplace(node,data)
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
-}
|
|
|
-const parentNo = ref(null);
|
|
|
-const ruleFormRefAdd = ref()
|
|
|
-const addNode = (node: any, data: any) => { // 新增节点
|
|
|
- state.ivrListFilter = state.ivrList.filter((item:any)=>item.id != data.id)
|
|
|
- parentNo.value = data.no;
|
|
|
- if (ruleFormRefAdd.value) {
|
|
|
- ruleFormRefAdd.value.resetFields();
|
|
|
- }
|
|
|
- drawerAdd.value = true;
|
|
|
-}
|
|
|
-const editNode = (node: any, data: any) => { //编辑节点
|
|
|
- editTitle.value = data.name + ' 编辑';
|
|
|
- currentIvr.value = JSON.parse(JSON.stringify(data));
|
|
|
- state.ivrListFilter = state.ivrList.filter((item:any)=>item.id != data.id)
|
|
|
- const form = JSON.parse(JSON.stringify(data));
|
|
|
- ruleForm.ivr = form;
|
|
|
- parentNo.value = data.prevIvrNo;
|
|
|
- if(data.ivrStrategies.length){// 如果有值就赋值
|
|
|
- ruleForm.ivrStrategeType = form.ivrStrategies[0].ivrStrategeType;
|
|
|
- ruleForm.input = form.ivrStrategies[0].input;
|
|
|
- ruleForm.ivrAnswerType = form.ivrStrategies[0].answer.ivrAnswerType;
|
|
|
- ruleForm.voiceList = form.ivrStrategies[0].answer.preVoice.split('+');
|
|
|
- switch (form.ivrStrategies[0].answer.ivrAnswerType) {
|
|
|
- case 1:// 转语音
|
|
|
- ruleForm.ivrVoice = form.ivrStrategies[0].answer.content;
|
|
|
- break;
|
|
|
- case 2: // 专分机
|
|
|
- ruleForm.tels = form.ivrStrategies[0].answer.content;
|
|
|
- break;
|
|
|
- case 3: // 转分机组
|
|
|
- let arr = <any>[];
|
|
|
- for(let i of form.ivrStrategies[0].groupSorts){
|
|
|
- arr.push(i.groupNo)
|
|
|
- }
|
|
|
- ruleForm.telsGroup = arr;
|
|
|
- break;
|
|
|
- case 4: // 转外部电话
|
|
|
- ruleForm.phone = form.ivrStrategies[0].answer.content;
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- drawer.value = true;
|
|
|
-}
|
|
|
-const nodeDelete = (node: any) => { //删除节点
|
|
|
- ElMessageBox.confirm(`此操作将删除:【${node.label}节点】,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass:'default-button'
|
|
|
- }).then(() => {
|
|
|
- let nodeItem = node.$$data;
|
|
|
- delIvrTree(nodeItem.id).then(()=>{
|
|
|
- ElMessage.success('删除成功');
|
|
|
- getConfig();
|
|
|
- })
|
|
|
- }).catch(() => { });
|
|
|
-}
|
|
|
-const ruleFormReplaceRef = ref();
|
|
|
-// 点击替换节点
|
|
|
-const nodeReplace = (node: any, data: any)=>{
|
|
|
- state.ruleFormReplace = JSON.parse(JSON.stringify(data));
|
|
|
- state.ivrListFilter = state.ivrList.filter((item:any)=>item.id != data.id)
|
|
|
- if (ruleFormReplaceRef.value) {
|
|
|
- ruleFormReplaceRef.value.resetFields();
|
|
|
- }
|
|
|
- isShowDialog.value = true;
|
|
|
-}
|
|
|
-const currentIvr = ref({
|
|
|
- ivrStrategies:<any>[],
|
|
|
- prevIvrNo:null,
|
|
|
- id:""
|
|
|
-});
|
|
|
-const chooseIvr = (val:any)=>{// 选择一条ivr
|
|
|
- currentIvr.value = val;
|
|
|
-}
|
|
|
-const onSubmitAdd = ()=>{// 新增
|
|
|
- ruleFormRefAdd.value.validate((valid: boolean) => {
|
|
|
- if (valid) {
|
|
|
- let request = {};
|
|
|
- switch (ruleFormAdd.ivrAnswerType ) {
|
|
|
- case 1: //转语音
|
|
|
- request = {
|
|
|
- input: ruleFormAdd.input || '',
|
|
|
- ivrStrategeType: ruleFormAdd.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleFormAdd.ivrAnswerType,
|
|
|
- content: ruleFormAdd.ivrVoice,
|
|
|
- preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
|
|
|
- }
|
|
|
- }
|
|
|
- break;
|
|
|
- case 2: // 分机
|
|
|
- request = {
|
|
|
- input: ruleFormAdd.input || '',
|
|
|
- ivrStrategeType: ruleFormAdd.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleFormAdd.ivrAnswerType,
|
|
|
- content: ruleFormAdd.tels,
|
|
|
- preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
|
|
|
- }
|
|
|
- }
|
|
|
- break;
|
|
|
- case 3:// 分机组
|
|
|
- let arr = <any>[];
|
|
|
- for(let i in ruleFormAdd.telsGroup){
|
|
|
- arr.push({
|
|
|
- sort:Number(i),
|
|
|
- groupNo:ruleFormAdd.telsGroup[i]
|
|
|
- })
|
|
|
- }
|
|
|
- request = {
|
|
|
- input: ruleFormAdd.input || '',
|
|
|
- ivrStrategeType: ruleFormAdd.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleFormAdd.ivrAnswerType,
|
|
|
- content: ruleFormAdd.ivrVoice,
|
|
|
- preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
|
|
|
- },
|
|
|
- groupSorts:arr
|
|
|
- }
|
|
|
- break;
|
|
|
- case 4:// 外部电话
|
|
|
- request = {
|
|
|
- input: ruleFormAdd.input || '',
|
|
|
- ivrStrategeType: ruleFormAdd.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleFormAdd.ivrAnswerType,
|
|
|
- content: ruleFormAdd.phone,
|
|
|
- preVoice: ruleFormAdd.voiceList ? ruleFormAdd.voiceList.join('+') : ""
|
|
|
- }
|
|
|
- }
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- let requestObj = {prevIvrNo:parentNo.value,id:currentIvr.value.id,ivrStrategies:[request]};
|
|
|
- addEditIvr(requestObj).then(()=>{
|
|
|
- ElMessage.success('新增成功');
|
|
|
- getConfig();
|
|
|
- drawerAdd.value = false;
|
|
|
- })
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-}
|
|
|
-const ruleFormRef = ref();
|
|
|
-const onSubmit = () => {//编辑保存
|
|
|
- ruleFormRef.value.validate((valid: boolean) => {
|
|
|
- if (valid) {
|
|
|
- let request = {};
|
|
|
- switch (ruleForm.ivrAnswerType ) {
|
|
|
- case 1: //转语音
|
|
|
- request = {
|
|
|
- input: ruleForm.input || '',
|
|
|
- ivrStrategeType: ruleForm.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleForm.ivrAnswerType,
|
|
|
- content: ruleForm.ivrVoice,
|
|
|
- preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
|
|
|
- }
|
|
|
- }
|
|
|
- break;
|
|
|
- case 2: // 分机
|
|
|
- request = {
|
|
|
- input: ruleForm.input || '',
|
|
|
- ivrStrategeType: ruleForm.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleForm.ivrAnswerType,
|
|
|
- content: ruleForm.tels,
|
|
|
- preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
|
|
|
- }
|
|
|
- }
|
|
|
- break;
|
|
|
- case 3:// 分机组
|
|
|
- let arr = <any>[];
|
|
|
- for(let i in ruleForm.telsGroup){
|
|
|
- arr.push({
|
|
|
- sort:Number(i),
|
|
|
- groupNo:ruleForm.telsGroup[i]
|
|
|
- })
|
|
|
- }
|
|
|
- request = {
|
|
|
- input: ruleForm.input || '',
|
|
|
- ivrStrategeType: ruleForm.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleForm.ivrAnswerType,
|
|
|
- content: ruleForm.ivrVoice,
|
|
|
- preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
|
|
|
- },
|
|
|
- groupSorts:arr
|
|
|
- }
|
|
|
- break;
|
|
|
- case 4:// 外部电话
|
|
|
- request = {
|
|
|
- input: ruleForm.input || '',
|
|
|
- ivrStrategeType: ruleForm.ivrStrategeType,
|
|
|
- answer: {
|
|
|
- ivrAnswerType:ruleForm.ivrAnswerType,
|
|
|
- content: ruleForm.phone,
|
|
|
- preVoice: ruleForm.voiceList ? ruleForm.voiceList.join('+') : ""
|
|
|
- }
|
|
|
- }
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
-
|
|
|
- let requestObj = {prevIvrNo:parentNo.value,id:currentIvr.value.id,ivrStrategies:[request]};
|
|
|
- addEditIvr(requestObj).then(()=>{
|
|
|
- ElMessage.success('编辑成功');
|
|
|
- getConfig();
|
|
|
- drawer.value = false;
|
|
|
- })
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-let currentReplace = reactive<any>({});
|
|
|
-const replaceRoot = (val:any)=>{// 选择替换的ivr
|
|
|
- currentReplace = val;
|
|
|
-}
|
|
|
-const confrimReplace = ()=>{ //替换保存
|
|
|
- ruleFormReplaceRef.value.validate((valid: boolean) => {
|
|
|
- if (valid) {
|
|
|
- replaceRootApi(currentReplace.id).then(()=>{
|
|
|
- ElMessage.success('替换成功');
|
|
|
- getConfig();
|
|
|
- isShowDialog.value = false;
|
|
|
- })
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-const getConfig = () => { //获取树形结构和初始化数据
|
|
|
- loading.value = true;
|
|
|
- getIvrTree(route.params.id).then((res: any) => {
|
|
|
- state.data = res?.content ?? [];
|
|
|
- getCenter();
|
|
|
- setTimeout(() => {
|
|
|
- loading.value = false;
|
|
|
- }, 300);
|
|
|
- }).catch(() => {
|
|
|
- loading.value = false;
|
|
|
- })
|
|
|
-}
|
|
|
-const init=()=>{// 获取页面上初始数据
|
|
|
- getIvrById(route.params.id).then((res: any) => {// 根据分类ID查出分类下所有的ivr 排除根节点
|
|
|
- state.ivrList = res?.content.ivrs.filter((item:any)=>item.id != state.data.id) ?? [];
|
|
|
- })
|
|
|
- getTelsList().then((res: any) => {//查询所有的分机
|
|
|
- state.telsList = res?.content ?? [];
|
|
|
- })
|
|
|
- getTelsGroupList().then((res: any) => { // 查询所有的分机组
|
|
|
- state.telsGroup = res?.content ?? [];
|
|
|
- })
|
|
|
- baseInfo().then((res: any) => {// 获取页面基础信息
|
|
|
- state.ivrAnswerTypes = res?.content.ivrAnswerTypes ?? [];
|
|
|
- state.ivrStrategeTypes = res?.content.ivrStrategeTypes ?? [];
|
|
|
- })
|
|
|
- voicequerylist().then((response: any) => {/** 获取所有语音文件列表 */
|
|
|
- state.voiceList = response.content.map((item:any)=>{
|
|
|
- return {
|
|
|
- key:item,
|
|
|
- label:item
|
|
|
- }
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
-
|
|
|
- });
|
|
|
-}
|
|
|
-// 设置 view 的高度
|
|
|
-const setViewHeight = computed(() => {
|
|
|
- let { isTagsview } = themeConfig.value;
|
|
|
- if (isTagsViewCurrenFull.value) {
|
|
|
- return `80px`;
|
|
|
- } else {
|
|
|
- if (isTagsview) return `164px`;
|
|
|
- else return `130px`;
|
|
|
- }
|
|
|
-});
|
|
|
-const vue3TreeOrg = ref();
|
|
|
-const getCenter = () => {// 设置配置居中
|
|
|
- nextTick(() => {
|
|
|
- let boxW: string | number = document.getElementsByClassName('zoom-container')[0].clientWidth;
|
|
|
- let box1W: string | number = document.getElementsByClassName('zm-draggable')[0].clientWidth;
|
|
|
- vue3TreeOrg.value.onDragStop((boxW - box1W) / 2, 30);
|
|
|
- });
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- getConfig();
|
|
|
- init();
|
|
|
- window.addEventListener('resize', getCenter);
|
|
|
-})
|
|
|
-// 缓存重新居中
|
|
|
-onActivated(() => {
|
|
|
- getCenter();
|
|
|
- window.addEventListener('resize', getCenter);
|
|
|
-})
|
|
|
-// 移除事件
|
|
|
-onUnmounted(() => {
|
|
|
- window.removeEventListener('resize', getCenter);
|
|
|
-})
|
|
|
-// 移除事件
|
|
|
-onBeforeRouteLeave(() => {
|
|
|
- window.removeEventListener('resize', getCenter);
|
|
|
-})
|
|
|
-</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.tree-org-node__text,
|
|
|
-.node-label {
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- div {
|
|
|
- white-space: nowrap
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.form_content {
|
|
|
- margin: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.zm-tree-org) {
|
|
|
- box-shadow: var(--el-box-shadow-light);
|
|
|
- background-color: var(--el-color-white);
|
|
|
- background-image: linear-gradient(90deg, rgba(156, 214, 255, .15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(156, 214, 255, .15) 10%, rgba(0, 0, 0, 0) 10%);
|
|
|
- background-size: 10px 10px;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.tree-org-node__inner) {
|
|
|
- background-color: var(--el-color-white) !important;
|
|
|
- color: var(--el-color-primary) !important;
|
|
|
- border: 1px solid var(--el-border-color) !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.tree-org-node__expand) {
|
|
|
- background-color: var(--el-color-white) !important;
|
|
|
- border: 1px solid var(--el-border-color) !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.draggable) {
|
|
|
- cursor: move;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-.zm-tree-contextmenu {
|
|
|
- background-color: var(--el-color-white) !important;
|
|
|
- color: var(--el-text-color-regular) !important;
|
|
|
- border: 1px solid var(--el-border-color) !important;
|
|
|
- box-shadow: var(--el-box-shadow-light);
|
|
|
- border-radius: 4px;
|
|
|
- animation: logoAnimation 0s ease-in-out;
|
|
|
-
|
|
|
- .zm-tree-menu-item {
|
|
|
- padding: 6px 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .zm-tree-menu-item:hover {
|
|
|
- background-color: var(--hotline-bg-color) !important;
|
|
|
- color: var(--el-color-primary) !important;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|