443 lines
13 KiB
JavaScript
443 lines
13 KiB
JavaScript
(function (window, undefined) {
|
||
var old_onload = window.onload;
|
||
window.onload = function () {
|
||
typeof old_onload == "function" && old_onload();
|
||
window.lang = Object.assign(window.lang, window.plugin_lang);
|
||
const { showToast } = vant;
|
||
const app = Vue.createApp({
|
||
components: {
|
||
topMenu,
|
||
curSelect,
|
||
},
|
||
data() {
|
||
return {
|
||
lang: window.lang,
|
||
// 分页
|
||
params: {
|
||
page: 1,
|
||
limit: 20,
|
||
pageSizes: [20, 50, 100],
|
||
total: 200,
|
||
orderby: "id",
|
||
sort: "desc",
|
||
keywords: "",
|
||
status: [3],
|
||
ticket_type_id: "",
|
||
},
|
||
ticketData: {
|
||
title: "",
|
||
ticket_type_id: "",
|
||
host_ids: "",
|
||
content: "",
|
||
attachment: [],
|
||
// 工单部门id
|
||
admin_role_id: "",
|
||
},
|
||
hasApp: false,
|
||
rules: {
|
||
title: [
|
||
{
|
||
required: true,
|
||
message: lang.ticket_tips9,
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
ticket_type_id: [
|
||
{
|
||
required: true,
|
||
message: lang.ticket_tips2,
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
content: [
|
||
{
|
||
required: true,
|
||
message: lang.ticket_tips6,
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
// 通用数据
|
||
commonData: {},
|
||
// 表格数据
|
||
dataList: [],
|
||
// 表格加载
|
||
tableLoading: false,
|
||
tableFinished: false,
|
||
// 创建工单弹窗是否显示
|
||
isShowDialog: false,
|
||
// 创建工单弹窗 数据
|
||
formData: {
|
||
title: "",
|
||
ticket_type_id: "",
|
||
host_ids: [],
|
||
content: "",
|
||
attachment: [],
|
||
},
|
||
// 表单错误信息显示
|
||
errText: "",
|
||
// 工单类别
|
||
ticketType: [],
|
||
ticketStatus: [],
|
||
// 关联产品列表
|
||
hostList: [],
|
||
createBtnLoading: false,
|
||
loading: false,
|
||
fileList: [],
|
||
configObj: {
|
||
ticket_notice_open: 0,
|
||
ticket_notice_description: "",
|
||
},
|
||
statusIsChange: false,
|
||
};
|
||
},
|
||
computed: {
|
||
calcTicketType() {
|
||
return [
|
||
{
|
||
value: "",
|
||
text: lang.all,
|
||
},
|
||
].concat(this.ticketType);
|
||
},
|
||
calcStatus() {
|
||
const arrName = [];
|
||
this.ticketStatus.forEach((item) => {
|
||
if (this.params.status.includes(item.id)) {
|
||
arrName.push(item.name);
|
||
}
|
||
});
|
||
return arrName.length > 1
|
||
? arrName[0] + " +" + (arrName.length - 1).toString()
|
||
: arrName.join("、");
|
||
},
|
||
calcHostName() {
|
||
const item = this.hostList.find((item) => {
|
||
return item.id == this.ticketData.host_ids;
|
||
});
|
||
if (item) {
|
||
return item.product_name + "(" + item.name + ")";
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
},
|
||
|
||
created() {
|
||
// 获取通用信息
|
||
this.getCommonData();
|
||
this.getOrderConfig();
|
||
// 获取工单类型
|
||
this.getTicketType();
|
||
// 获取工单状态
|
||
this.getTicketStatus();
|
||
// 获取关联产品列表
|
||
this.getHostList();
|
||
},
|
||
mounted() {
|
||
this.hasApp = havePlugin("IdcsmartAppMarket");
|
||
},
|
||
methods: {
|
||
handleRenew(item) {
|
||
const hostId = item.parent_host_id || item.id;
|
||
window.open(`/productdetail.htm?id=${hostId}`);
|
||
},
|
||
goBack() {
|
||
window.history.back();
|
||
},
|
||
async getOrderConfig() {
|
||
try {
|
||
const res = await getOrderConfig();
|
||
this.configObj = res.data.data;
|
||
} catch (error) {}
|
||
},
|
||
|
||
// 获取通用配置
|
||
getCommonData() {
|
||
this.commonData = JSON.parse(
|
||
localStorage.getItem("common_set_before")
|
||
);
|
||
document.title =
|
||
this.commonData.website_name + "-" + lang.ticket_label15;
|
||
},
|
||
handeSelecFile() {
|
||
this.$refs.uploadRef.chooseFile();
|
||
},
|
||
afterRead(file) {
|
||
const arr = [];
|
||
if (file instanceof Array) {
|
||
arr.push(...file);
|
||
} else {
|
||
arr.push(file);
|
||
}
|
||
this.uploadFiles(arr);
|
||
},
|
||
handeDelFile(file, index) {
|
||
this.ticketData.attachment = this.ticketData.attachment.filter(
|
||
(item) => {
|
||
return item != file.save_name;
|
||
}
|
||
);
|
||
this.fileList.splice(index, 1);
|
||
},
|
||
delAllFile() {
|
||
this.ticketData.attachment = [];
|
||
this.fileList = [];
|
||
},
|
||
uploadFiles(arr) {
|
||
arr.forEach((item) => {
|
||
const formData = new FormData();
|
||
formData.set("file", item.file); // 这里要用set,如果用append，还是会出现一起上传的情况
|
||
uploadFile(formData)
|
||
.then((res) => {
|
||
console.log(res);
|
||
if (res.data.status === 200) {
|
||
this.fileList.push({
|
||
file: item.file,
|
||
save_name: res.data.data.save_name,
|
||
});
|
||
this.ticketData.attachment.push(res.data.data.save_name);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
showToast(err.data.msg);
|
||
});
|
||
});
|
||
},
|
||
initPage() {
|
||
this.params.page = 1;
|
||
this.dataList = [];
|
||
// 获取列表
|
||
this.getTicketList();
|
||
},
|
||
// 获取工单列表
|
||
getTicketList() {
|
||
this.tableLoading = true;
|
||
ticketList(this.params)
|
||
.then((res) => {
|
||
if (res.data.status === 200) {
|
||
this.dataList = this.dataList.concat(res.data.data.list);
|
||
this.tableLoading = false;
|
||
this.params.page++;
|
||
this.params.total = res.data.data.count;
|
||
this.tableFinished =
|
||
this.dataList.length >= res.data.data.count;
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.tableLoading = false;
|
||
showToast(err.data.msg);
|
||
});
|
||
},
|
||
// 展示创建弹窗 并初始化弹窗数据
|
||
showCreateDialog() {
|
||
location.href = `addTicket.htm`;
|
||
},
|
||
handelMore() {},
|
||
calcProductName(item) {
|
||
const curTime = parseInt(new Date().getTime() / 1000);
|
||
if (item.due_time > 0) {
|
||
if (item.due_time <= curTime) {
|
||
// 已到期
|
||
return `(${lang.ticket_label21})`;
|
||
} else if (item.due_time - curTime <= item.renewal_first_day_time) {
|
||
// 即将到期
|
||
return `(${item.name.slice(0, 8)}......${item.name.slice(-5)})${
|
||
lang.ticket_label22
|
||
}`;
|
||
} else {
|
||
return `(${item.name})`;
|
||
}
|
||
} else {
|
||
return `(${item.name})`;
|
||
}
|
||
},
|
||
calcShowRenew(item) {
|
||
const curTime = parseInt(new Date().getTime() / 1000);
|
||
if (
|
||
item.due_time > 0 &&
|
||
(item.due_time <= curTime ||
|
||
item.due_time - curTime <= item.renewal_first_day_time)
|
||
) {
|
||
return true;
|
||
}
|
||
},
|
||
onSubmit() {
|
||
this.$refs.ticketForm.validate().then(() => {
|
||
this.loading = true;
|
||
const params = { ...this.ticketData };
|
||
params.host_ids = params.host_ids ? [params.host_ids] : [];
|
||
createTicket(params)
|
||
.then((res) => {
|
||
if (res.data.status == 200) {
|
||
const id = res.data.data.id;
|
||
location.href = `ticketDetails.htm?id=${id}`;
|
||
}
|
||
this.loading = false;
|
||
})
|
||
.catch((error) => {
|
||
this.loading = false;
|
||
showToast(error.data.msg);
|
||
});
|
||
});
|
||
},
|
||
statusClose() {
|
||
if (this.statusIsChange) {
|
||
this.initPage();
|
||
this.statusIsChange = false;
|
||
}
|
||
},
|
||
|
||
clickStatus(item) {
|
||
if (this.params.status.includes(item)) {
|
||
this.params.status.splice(this.params.status.indexOf(item), 1);
|
||
} else {
|
||
this.params.status.push(item);
|
||
}
|
||
this.statusIsChange = true;
|
||
},
|
||
openAddTicket() {
|
||
this.ticketData = {
|
||
title: "",
|
||
ticket_type_id: "",
|
||
host_ids: "",
|
||
content: "",
|
||
attachment: [],
|
||
// 工单部门id
|
||
admin_role_id: "",
|
||
};
|
||
this.$refs.ticketForm && this.$refs.ticketForm.resetValidation();
|
||
this.isShowDialog = true;
|
||
},
|
||
closeDialog() {
|
||
this.delAllFile();
|
||
this.isShowDialog = false;
|
||
},
|
||
hexToRgb(hex) {
|
||
const color = hex.split("#")[1];
|
||
const r = parseInt(color.substring(0, 2), 16);
|
||
const g = parseInt(color.substring(2, 4), 16);
|
||
const b = parseInt(color.substring(4, 6), 16);
|
||
return `rgba(${r},${g},${b},0.12)`;
|
||
},
|
||
// 获取工单类型
|
||
getTicketType() {
|
||
ticketType().then((res) => {
|
||
if (res.data.status === 200) {
|
||
this.ticketType = res.data.data.list.map((item) => {
|
||
item.value = item.id;
|
||
item.text = item.name;
|
||
return item;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 获取工单状态列表
|
||
getTicketStatus() {
|
||
ticketStatus().then((res) => {
|
||
if (res.data.status === 200) {
|
||
this.params.status = [3];
|
||
this.ticketStatus = res.data.data.list.map((item) => {
|
||
item.value = item.id;
|
||
item.text = item.name;
|
||
return item;
|
||
});
|
||
res.data.data.list.forEach((item) => {
|
||
if (item.status === 0) {
|
||
this.params.status.push(item.id);
|
||
}
|
||
});
|
||
// 获取工单列表
|
||
this.initPage();
|
||
}
|
||
});
|
||
},
|
||
// 获取产品列表
|
||
getHostList() {
|
||
const params = {
|
||
keywords: "",
|
||
status: "",
|
||
page: 1,
|
||
limit: 1000,
|
||
orderby: "id",
|
||
sort: "desc",
|
||
scene: "ticket",
|
||
};
|
||
hostAll(params).then((res) => {
|
||
if (res.data.status === 200) {
|
||
this.hostList = res.data.data.list
|
||
.filter((item) => item.status !== "Deleted")
|
||
.map((item) => {
|
||
const curTime = parseInt(new Date().getTime() / 1000);
|
||
item.isDue = item.due_time > 0 && item.due_time <= curTime;
|
||
return item;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
chooseItem(e) {
|
||
const val = e[0].id;
|
||
const cur = this.hostList.filter((el) => el.id === val);
|
||
if (this.hasApp && cur.length > 0 && cur[0].isDue) {
|
||
this.ticketData.host_ids = "";
|
||
}
|
||
},
|
||
|
||
// 跳转工单详情
|
||
itemReply(record) {
|
||
const id = record.id;
|
||
location.href = `ticketDetails.htm?id=${id}`;
|
||
},
|
||
// 关闭工单
|
||
itemClose(record) {
|
||
const id = record.id;
|
||
const params = {
|
||
id,
|
||
};
|
||
// 调用关闭工单接口 给出结果
|
||
closeTicket(params)
|
||
.then((res) => {
|
||
if (res.data.status === 200) {
|
||
showToast(res.data.msg);
|
||
this.initPage();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
showToast(err.data.msg);
|
||
});
|
||
},
|
||
// 催单
|
||
itemUrge(record) {
|
||
const nowDate = new Date().getTime();
|
||
const last_reply_time = record.last_urge_time * 1000;
|
||
if (nowDate - last_reply_time < 1000 * 60 * 15) {
|
||
showToast(lang.ticket_label16);
|
||
return;
|
||
}
|
||
const id = record.id;
|
||
const params = { id };
|
||
// 调用催单接口 给出结果
|
||
urgeTicket(params)
|
||
.then((res) => {
|
||
if (res.data.status === 200) {
|
||
showToast(res.data.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
showToast(err.data.msg);
|
||
});
|
||
},
|
||
|
||
titleClick(record) {
|
||
const id = record.id;
|
||
location.href = `ticketDetails.htm?id=${id}`;
|
||
},
|
||
},
|
||
});
|
||
window.directiveInfo.forEach((item) => {
|
||
app.directive(item.name, item.fn);
|
||
});
|
||
app.use(vant).mount("#template");
|
||
};
|
||
})(window);
|