lcw
This commit is contained in:
256
src/views/backOfficeSystem/goingJob/addForm.vue
Normal file
256
src/views/backOfficeSystem/goingJob/addForm.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}完成情况</span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_cnt">
|
||||
<FormMessage ref="elform" :disabled="disabled" v-model="listQuery" :formList="formData" :rules="rules">
|
||||
</FormMessage>
|
||||
<div>
|
||||
<div class="btn_box">
|
||||
<el-button :disabled="disabled" type="primary" size="small" @click="openZdsjLod">打开今日完成情况列表</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="300"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger">
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" :disabled="disabled" size="small" @click="openZdsjLod('edit', row)">编辑</el-link>
|
||||
<el-link type="danger" :disabled="disabled" size="small" @click="deleteZdsjLodList(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<div>
|
||||
<div class="btn_box">
|
||||
<el-button :disabled="disabled" type="primary" size="small" @click="openToDayContent">明日值班工作列表</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="toDayJobList.tableData" :tableColumn="toDayJobList.tableColumn" :tableHeight="300"
|
||||
:key="toDayJobList.keyCount" :tableConfiger="toDayJobList.tableConfiger">
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" :disabled="disabled" size="small"
|
||||
@click="openToDayContent('edit', row)">编辑</el-link>
|
||||
<el-link type="danger" :disabled="disabled" size="small" @click="deleteToDayContent(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ZdsjLod v-model="zdsjLodShow" @addZdsjLodList="addZdsjLodList" :zdsjLod="zdsjLod" />
|
||||
<ToDayContent v-model="toDayContentShow" @addZdsjLodList="addToDayLodList" :toDayContent="toDayContent" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, watch, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import ZdsjLod from "./zdsjLod.vue";
|
||||
import ToDayContent from "./toDayContent.vue";
|
||||
const emit = defineEmits(["getList"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const rules = reactive({
|
||||
jrzbrXm: [{ required: true, message: "请输入今日值班人", trigger: "blur" }],
|
||||
jrzbrLxdh: [{ required: true, message: "请输入今日值班电话", trigger: "blur" }],
|
||||
mrzbrXm: [{ required: true, message: "请输入明日值班人", trigger: "blur" }],
|
||||
mrzbrLxdh: [{ required: true, message: "请输入明日值班电话", trigger: "blur" }],
|
||||
kssj: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
|
||||
jssj: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
|
||||
gzrq: [{ required: true, message: "请选择工作日期", trigger: "blur" }],
|
||||
});
|
||||
const listQuery = ref({}); //表单
|
||||
const formData = ref([
|
||||
{ label: "今日值班人", prop: "jrzbrXm", type: "input" },
|
||||
{ label: "今日值班电话", prop: "jrzbrLxdh", type: "input" },
|
||||
{ label: "明日值班人", prop: "mrzbrXm", type: "input" },
|
||||
{ label: "明日值班电话", prop: "mrzbrLxdh", type: "input" },
|
||||
{ label: "开始时间", prop: "kssj", type: "datetime" },
|
||||
{ label: "结束时间", prop: "jssj", type: "datetime" },
|
||||
{ label: "工作日期", prop: "gzrq", type: "date" },
|
||||
{ label: "备注", prop: "bz", type: "textarea", width: "100%" },
|
||||
|
||||
]);
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null", //选择类型
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: "工作任务", prop: "grw", showOverflowTooltip: true },
|
||||
{ label: "完成情况", prop: "wcqk", showOverflowTooltip: true },
|
||||
{ label: " 来源", prop: "ly", showOverflowTooltip: true },
|
||||
// { label: "序号", prop: "index", showOverflowTooltip: true },
|
||||
]
|
||||
});
|
||||
const toDayJobList = reactive({
|
||||
tableData: [], //表格数据
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null", //选择类型
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: "工作内容", prop: "gznr", showOverflowTooltip: true },
|
||||
]
|
||||
});
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("");
|
||||
const disabled = ref(false);
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
title.value = type == 'edit' ? '编辑' : type == 'add' ? '新增' : '详情'
|
||||
dialogForm.value = true;
|
||||
if (type != 'add') {
|
||||
qcckGet({}, '/mosty-gsxt/gzqk/' + row.id).then(res => {
|
||||
listQuery.value = res;
|
||||
pageData.tableData = res.wcqkList || [];
|
||||
toDayJobList.tableData = res.zbgzList || [];
|
||||
});
|
||||
if (type == 'detail') {
|
||||
disabled.value = true;
|
||||
} else {
|
||||
disabled.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 提交
|
||||
const submit = () => {
|
||||
const promes = {
|
||||
...listQuery.value,
|
||||
wcqkList: pageData.tableData,
|
||||
zbgzList: toDayJobList.tableData,
|
||||
}
|
||||
elform.value.submit((data) => {
|
||||
loading.value = true;
|
||||
if (title.value == "新增") {
|
||||
qcckPost(promes, '/mosty-gsxt/gzqk/addEntity').then(() => {
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("getList");
|
||||
close();
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
qcckPut(promes, '/mosty-gsxt/gzqk/editEntity').then(() => {
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("getList");
|
||||
close();
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
//打开今日完成情况列表
|
||||
const zdsjLodShow = ref();
|
||||
const zdsjLod = ref();
|
||||
const openZdsjLod = (type, row) => {
|
||||
if (type == 'edit') {
|
||||
console.log(row);
|
||||
zdsjLod.value = { ...row };
|
||||
}
|
||||
zdsjLodShow.value = true;
|
||||
}
|
||||
const addZdsjLodList = (val) => {
|
||||
const index = pageData.tableData.findIndex(v => v.id == val.id);
|
||||
if (index != -1) {
|
||||
pageData.tableData[index] = val;
|
||||
} else {
|
||||
pageData.tableData.push(val);
|
||||
}
|
||||
}
|
||||
const deleteZdsjLodList = (id) => {
|
||||
const index = pageData.tableData.findIndex(v => v.id == id);
|
||||
if (index != -1) {
|
||||
pageData.tableData.splice(index, 1);
|
||||
}
|
||||
}
|
||||
// 打开明日值日列表
|
||||
const toDayContentShow = ref();
|
||||
const toDayContent = ref();
|
||||
const openToDayContent = (type, row) => {
|
||||
if (type == 'edit') {
|
||||
toDayContent.value = { ...row };
|
||||
}
|
||||
toDayContentShow.value = true;
|
||||
}
|
||||
const addToDayLodList = (val) => {
|
||||
const index = toDayJobList.tableData.findIndex(v => v.id == val.id);
|
||||
if (index != -1) {
|
||||
toDayJobList.tableData[index] = val;
|
||||
} else {
|
||||
toDayJobList.tableData.push(val);
|
||||
}
|
||||
}
|
||||
const deleteToDayContent = (id) => {
|
||||
const index = toDayJobList.tableData.findIndex(v => v.id == id);
|
||||
if (index != -1) {
|
||||
toDayJobList.tableData.splice(index, 1);
|
||||
}
|
||||
}
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
|
||||
color: #0072ff;
|
||||
background: rgba(0, 114, 255, 0.3);
|
||||
}
|
||||
|
||||
.boxlist {
|
||||
width: calc(99% - 50px);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.depBox {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 0 0 0 4px;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
|
||||
.coolor {
|
||||
color: #d3d3d3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.zdy-taf {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
border: 1px solid #e9e9e9;
|
||||
border-radius: 4px;
|
||||
padding: 0px 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.map {
|
||||
height: 520px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user