hotline-admin/src/views/device/trunks/component/trunksEdit.vue

<template>
  <div class="system-add-menu-container">
    <el-dialog title="修改线路" v-model="state.isShowDialog" draggable>
      <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="150px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="线路号" prop="trunkId" :rules="[{ required: true, message: '请输入线路号', trigger: 'blur' }]">
              <el-input v-model="state.ruleForm.trunkId" placeholder="请输入线路号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="早上开始时间" prop="morningBegin"
              :rules="[{ required: true, message: '请选择早上开始时间', trigger: 'change' }]">
              <el-time-select v-model="state.ruleForm.morningBegin" :max-time="state.ruleForm.morningEnd"
                placeholder="请选择早上开始时间" start="00:00" step="00:30" end="23:30" class="w100" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="早上结束时间" prop="morningEnd"
              :rules="[{ required: true, message: '请选择早上结束时间', trigger: 'change' }]">
              <el-time-select v-model="state.ruleForm.morningEnd" :min-time="state.ruleForm.morningBegin"
                placeholder="请选择早上结束时间" start="00:00" step="00:30" end="23:30" class="w100" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="下午开始时间" prop="afterBegin"
              :rules="[{ required: true, message: '请选择下午开始时间', trigger: 'change' }]">
              <el-time-select v-model="state.ruleForm.afterBegin" :max-time="state.ruleForm.afterEnd"
                placeholder="请选择下午开始时间" start="00:00" step="00:30" end="23:30" class="w100" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="下午结束时间" prop="afterEnd"
              :rules="[{ required: true, message: '请选择下午结束时间', trigger: 'change' }]">
              <el-time-select v-model="state.ruleForm.afterEnd" :min-time="state.ruleForm.afterBegin"
                placeholder="请选择下午结束时间" start="00:00" step="00:30" end="23:30" class="w100" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="工作日" prop="workDay"
              :rules="[{ required: true, message: '请选择工作日', trigger: 'change' }]">
              <el-select v-model="state.ruleForm.workDay" placeholder="请选择工作日" value-key="weekValue" class="w100"
                multiple>
                <el-option v-for="item in state.workDayList" :key="item.weekValue" :label="item.weekName"
                  :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="工作时间IVR" prop="workCategory"
              :rules="[{ required: true, message: '请选择工作时间IVR', trigger: 'change' }]">
              <el-select v-model="state.ruleForm.workCategory" value-key="id" placeholder="请选择工作时间IVR" class="w100">
                <el-option v-for="item in state.workCategoryList" :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">
            <el-form-item label="休息时间IVR" prop="restCategory"
              :rules="[{ required: true, message: '请选择休息时间IVR', trigger: 'change' }]">
              <el-select v-model="state.ruleForm.restCategory" value-key="id" placeholder="请选择休息时间IVR" class="w100">
                <el-option v-for="item in state.restCategoryList" :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">
            <el-form-item label="工作时间直转分机组" prop="workToGroup"
              :rules="[{ required: true, message: '请选择工作时间直转分机组', trigger: 'change' }]">
              <el-select v-model="state.ruleForm.workToGroup" value-key="no" placeholder="请选择工作时间直转分机组" class="w100">
                <el-option v-for="item in state.workToGroupList" :key="item.no" :label="item.name" :value="item.no" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="休息时间直转分机组" prop="restToGroup"
              :rules="[{ required: true, message: '请选择休息时间直转分机组', trigger: 'change' }]">
              <el-select v-model="state.ruleForm.restToGroup" value-key="no" placeholder="请选择休息时间直转分机组" class="w100">
                <el-option v-for="item in state.restToGroupList" :key="item.no" :label="item.name" :value="item.no" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否启用" prop="isEnable"
              :rules="[{ required: false, message: '是否启用', trigger: 'change' }]">
              <el-switch v-model="state.ruleForm.isEnable" inline-prompt active-text="启" inactive-text="禁"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" class="default-button">取 消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)" v-waves="'light'" :loading="state.loading">确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="trunksEdit">
import { reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { updatetrunk, getTrunkDetail, baseInfo } from '/@/api/device/trunks';

// 定义接口来定义对象的类型
interface OrgFormState {
  isShowDialog: boolean;
  ruleForm: {
    trunkId: string; // 线路号
    morningBegin: string; //早上开始时间
    morningEnd: string; // 早上结束时间
    afterBegin: string; // 下午开始时间
    afterEnd: string; //下午结束时间
    workDay: Array<any>; //工作日
    workCategory: string; //工作时间IVR
    restCategory: string; // 休息时间IVR
    workToGroup: string; // 工作时间直转分机组
    restToGroup: string; //休息时间直转分机组
    isEnable: boolean, //是否启用
  };
  workDayList: Array<any>; // 工作日数据
  workCategoryList: Array<any>; // 工作时间IVR数据
  restCategoryList: Array<any>; // 休息时间IVR数据
  workToGroupList: Array<any>; // 工作时间直转分机组数据
  restToGroupList: Array<any>; // 休息时间直转分机组数据
  loading: boolean;
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const ruleFormRef = ref<FormInstance>()
const state = reactive<OrgFormState>({
  isShowDialog: false,
  ruleForm: {
    trunkId: '',
    morningBegin: '',
    morningEnd: '',
    afterBegin: '',
    afterEnd: '',
    workDay: [],
    workCategory: '',
    restCategory: '',
    workToGroup: '',
    restToGroup: '',
    isEnable: true,
  },
  workDayList: [],
  workCategoryList: [],
  restCategoryList: [],
  workToGroupList: [],
  restToGroupList: [],
  loading: false,
});
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
// 打开弹窗
const openDialog = (row: any) => {
  ruleFormRef.value?.clearValidate();
  ruleFormRef.value?.resetFields();
  // 获取详情
  if (userInfos?.value.authBtnList.includes('300501')) { // 获取路线对象
    getTrunkDetail(row.id).then((res: any) => {
      getOptions();
      state.ruleForm = res.result;
      state.isShowDialog = true;
    })
  } else {
    ElMessage.warning('您没有获取路线对象权限');
  }
};
// 获取选项框数据
const getOptions = async () => {
  const res: any = await baseInfo();
  const { workDay, restCategory, workCategorys, workToGroup, restToGroup } = res.result;
  state.workDayList = workDay;
  state.workCategoryList = workCategorys;
  state.restCategoryList = restCategory;
  state.workToGroupList = workToGroup;
  state.restToGroupList = restToGroup;
}
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 编辑保存
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      updatetrunk(state.ruleForm).then(() => {
        emit("updateList");
        closeDialog(); // 关闭弹窗
        ElMessage.success('操作成功');
      })
    } else {
      console.log('error submit!', fields)
    }
  })
};
// 暴露变量
defineExpose({
  openDialog,
  closeDialog
});
</script>