1
This commit is contained in:
Leo
208
src/views/jarvis/phoneReplaceConfig/index.vue
Normal file
208
src/views/jarvis/phoneReplaceConfig/index.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||||
<el-tab-pane label="腾锋" name="腾锋">
|
||||
<div class="phone-config-container">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>腾锋手机号配置</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="handleAddPhone('腾锋')">添加手机号</el-button>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="tfPhoneList" border>
|
||||
<el-table-column label="序号" type="index" width="80" align="center" />
|
||||
<el-table-column label="手机号" align="center" prop="phone" />
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleRemovePhone('腾锋', scope.row.phone)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-button type="primary" @click="handleSave('腾锋')">保存配置</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="昭迎" name="昭迎">
|
||||
<div class="phone-config-container">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>昭迎手机号配置</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="handleAddPhone('昭迎')">添加手机号</el-button>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="zyPhoneList" border>
|
||||
<el-table-column label="序号" type="index" width="80" align="center" />
|
||||
<el-table-column label="手机号" align="center" prop="phone" />
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleRemovePhone('昭迎', scope.row.phone)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-button type="primary" @click="handleSave('昭迎')">保存配置</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 添加手机号对话框 -->
|
||||
<el-dialog :title="'添加手机号 - ' + currentType" :visible.sync="addPhoneDialogVisible" width="400px" append-to-body>
|
||||
<el-form ref="addPhoneForm" :model="addPhoneForm" :rules="addPhoneRules" label-width="80px">
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="addPhoneForm.phone" placeholder="请输入11位手机号" maxlength="11" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitAddPhone">确 定</el-button>
|
||||
<el-button @click="addPhoneDialogVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPhoneList, setPhoneList, addPhone, removePhone } from "@/api/jarvis/phoneReplaceConfig";
|
||||
|
||||
export default {
|
||||
name: "PhoneReplaceConfig",
|
||||
data() {
|
||||
// 手机号验证规则
|
||||
const validatePhone = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入手机号'));
|
||||
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入正确的11位手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 当前激活的标签页
|
||||
activeTab: "腾锋",
|
||||
// 腾锋手机号列表
|
||||
tfPhoneList: [],
|
||||
// 昭迎手机号列表
|
||||
zyPhoneList: [],
|
||||
// 添加手机号对话框
|
||||
addPhoneDialogVisible: false,
|
||||
// 当前操作的类型
|
||||
currentType: "腾锋",
|
||||
// 添加手机号表单
|
||||
addPhoneForm: {
|
||||
phone: ""
|
||||
},
|
||||
// 添加手机号表单校验
|
||||
addPhoneRules: {
|
||||
phone: [
|
||||
{ required: true, validator: validatePhone, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadPhoneList("腾锋");
|
||||
this.loadPhoneList("昭迎");
|
||||
},
|
||||
methods: {
|
||||
/** 加载手机号列表 */
|
||||
loadPhoneList(type) {
|
||||
this.loading = true;
|
||||
getPhoneList(type).then(response => {
|
||||
const phoneList = response.data || [];
|
||||
const formattedList = phoneList.map(phone => ({ phone }));
|
||||
if (type === "腾锋") {
|
||||
this.tfPhoneList = formattedList;
|
||||
} else if (type === "昭迎") {
|
||||
this.zyPhoneList = formattedList;
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 标签页切换 */
|
||||
handleTabClick(tab) {
|
||||
// 标签页切换时不需要重新加载，因为已经在created中加载了
|
||||
},
|
||||
/** 添加手机号 */
|
||||
handleAddPhone(type) {
|
||||
this.currentType = type;
|
||||
this.addPhoneForm.phone = "";
|
||||
this.addPhoneDialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.addPhoneForm) {
|
||||
this.$refs.addPhoneForm.clearValidate();
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 提交添加手机号 */
|
||||
submitAddPhone() {
|
||||
this.$refs.addPhoneForm.validate(valid => {
|
||||
if (valid) {
|
||||
const phoneList = this.currentType === "腾锋" ? this.tfPhoneList : this.zyPhoneList;
|
||||
// 检查是否已存在
|
||||
if (phoneList.some(item => item.phone === this.addPhoneForm.phone)) {
|
||||
this.$modal.msgError("该手机号已存在");
|
||||
return;
|
||||
}
|
||||
// 添加到列表
|
||||
phoneList.push({ phone: this.addPhoneForm.phone });
|
||||
// 保存到后端
|
||||
const phoneArray = phoneList.map(item => item.phone);
|
||||
setPhoneList(this.currentType, phoneArray).then(() => {
|
||||
this.$modal.msgSuccess("添加成功");
|
||||
this.addPhoneDialogVisible = false;
|
||||
this.loadPhoneList(this.currentType);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除手机号 */
|
||||
handleRemovePhone(type, phone) {
|
||||
this.$modal.confirm('是否确认删除手机号"' + phone + '"？').then(() => {
|
||||
const phoneList = type === "腾锋" ? this.tfPhoneList : this.zyPhoneList;
|
||||
const index = phoneList.findIndex(item => item.phone === phone);
|
||||
if (index > -1) {
|
||||
phoneList.splice(index, 1);
|
||||
const phoneArray = phoneList.map(item => item.phone);
|
||||
return setPhoneList(type, phoneArray);
|
||||
}
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.loadPhoneList(type);
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 保存配置 */
|
||||
handleSave(type) {
|
||||
const phoneList = type === "腾锋" ? this.tfPhoneList : this.zyPhoneList;
|
||||
const phoneArray = phoneList.map(item => item.phone);
|
||||
setPhoneList(type, phoneArray).then(() => {
|
||||
this.$modal.msgSuccess("保存成功");
|
||||
this.loadPhoneList(type);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.phone-config-container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user