2022-06-08 14:51:11 +08:00

472 lines
15 KiB
Vue

<template>
<div class="fullHeight">
<div class="searchBox whiteBlock">
<el-select
size="medium"
v-model="workerInfo.devSn"
@change="getWorkerList"
>
<el-option
v-for="item in devList"
:key="item.devSn"
:label="item.laboratoryName"
:value="item.devSn"
>
</el-option>
</el-select>
<el-button
style="margin-left: 15px"
size="medium"
type="primary"
@click="addBefore"
>{{ $t("message.markRoomOverview.addSample") }}
</el-button>
</div>
<div class="table_wrap whiteBlock">
<vue-scroll>
<el-table
class="tables"
:data="workerList"
row-key="id"
default-expand-all
:tree-props="{ children: 'list', hasChildren: 'hasChildren' }"
>
<el-table-column
type="index"
width="50"
align="center"
:label="$t('message.personnelPosition.beaconManage.table.index')"
></el-table-column>
<el-table-column
prop="sampleNo"
:label="$t('message.markRoomOverview.sampleNo')"
></el-table-column>
<el-table-column
prop="curingPeriod"
:label="$t('message.markRoomOverview.maintenCycle')"
></el-table-column>
<el-table-column
prop="sampleTypeName"
:label="$t('message.markRoomOverview.sampleType')"
></el-table-column>
<el-table-column
prop="sampleNum"
:label="$t('message.markRoomOverview.sampleNum')"
></el-table-column>
<el-table-column
prop="locationName"
:label="$t('message.markRoomOverview.location')"
>
<template slot-scope="scope">
{{scope.row.locationName}}{{scope.row.secondLocationName?'>':''}}{{scope.row.secondLocationName}}
</template>
</el-table-column>
<el-table-column
prop="formingTime"
:label="$t('message.markRoomOverview.finishTime')"
></el-table-column>
<el-table-column width="250">
<template slot-scope="scope">
<div class="tableBtns">
<!-- <div @click="editBefore(scope.row)" class="operationText">
<span>{{ $t("message.markRoomOverview.addSon") }}</span>
</div> -->
<div @click="editBefore(scope.row)" class="operationText">
<img
src="@/assets/images/icon-edit.png"
width="15px"
height="15px"
/>
<span>{{ $t("message.workType.edit") }}</span>
</div>
<div @click="deleteBefore(scope.row)" class="operationText">
<img
src="@/assets/images/icon-delete.png"
width="15px"
height="15px"
/>
<span>{{ $t("message.workType.delete") }}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</vue-scroll>
</div>
<el-dialog
:modal-append-to-body="false"
:title="$t('message.markRoomOverview.operate')[type]"
:visible.sync="dialogVisible"
width="667px"
>
<div class="dialog_content">
<el-form
ref="addEditForm"
label-width="120px"
size="medium"
class="dialogFormBox"
:rules="addEditRules"
:model="workerInfo"
>
<el-form-item
:label="$t('message.markRoomOverview.sampleType')"
prop="sampleTypeId"
>
<el-select v-model="workerInfo.sampleTypeId">
<el-option
v-for="item in sampleTypeList"
:key="item.id"
:label="item.sampleTypeName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
:label="$t('message.markRoomOverview.maintenCycle')"
prop="curingPeriod"
>
<el-input
v-model.number="workerInfo.curingPeriod"
:placeholder="$t('message.workType.placeholder')"
></el-input>
</el-form-item>
<el-form-item
:label="$t('message.markRoomOverview.sampleNo')"
prop="sampleNo"
>
<el-input
v-model="workerInfo.sampleNo"
:placeholder="$t('message.workType.placeholder')"
></el-input>
</el-form-item>
<el-form-item
:label="$t('message.markRoomOverview.finishTime')"
prop="formingTime"
>
<!-- 选择日期时间 -->
<el-date-picker
v-model="workerInfo.formingTime"
type="datetime"
:placeholder="$t('message.projectInfo.chooseDateAndTime')"
value-format="yyyy-MM-dd hh:mm"
>
</el-date-picker>
<!-- <el-input
v-model="workerInfo.formingTime"
:placeholder="$t('message.workType.placeholder')"
></el-input> -->
</el-form-item>
<el-form-item
:label="$t('message.markRoomOverview.sampleNum')"
prop="sampleNum"
>
<el-input
v-model="workerInfo.sampleNum"
:placeholder="$t('message.workType.placeholder')"
></el-input>
</el-form-item>
<el-form-item
:label="$t('message.markRoomOverview.location')"
prop="locationId"
>
<el-cascader
v-model="selectLocationArr"
:options="sampleLocationList"
:props="{ children: 'list', label: 'locationName', value: 'id' }"
></el-cascader>
</el-form-item>
<!-- 到期通知人 -->
<el-form-item :label="$t('message.projectInfo.dueNotifier')">
<el-select v-model="expireNotice" multiple
:placeholder="$t('message.alarmValueSet.placeholder_select')">
<el-option
v-for="item in options"
:key="item.userId"
:label="item.workerName"
:value="item.userId">
</el-option>
</el-select>
</el-form-item>
<div class="dialog-footer">
<el-button
class="cancleBtn"
@click="dialogVisible = false"
icon="el-icon-circle-close"
size="medium"
>{{ $t("message.personnelPosition.cancel") }}
</el-button>
<el-button
type="primary"
icon="el-icon-circle-check"
@click="addWorker"
size="medium"
>{{ $t("message.personnelPosition.determine") }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {
addstandardSampleRecordApi,
editstandardSampleRecordApi,
deletestandardSampleRecordApi,
getstandardSampleRecordListApi,
getstandardDevListApi,
getstandardLocationListApi,
getstandardSampleTypeListApi,
} from "@/assets/js/api/markingRoom";
import {
getLaborManagementInfoList
} from "../../../assets/js/api/environmentManage";
export default {
mounted() {
this.getSampleTypeList();
this.loadDevList();
this.getLaborManagementList()
},
data() {
return {
type: "add",
sampleTypeList: [],
sampleLocationList: [],
selectLocationArr: [],
workerInfo: {
curingPeriod: "",
devSn: "",
formingTime: "",
locationId: "",
sampleNo: "",
sampleNum: "",
sampleTypeId: "",
projectSn: this.$store.state.projectSn,
secondLocationId:''
},
addEditRules: {
sampleTypeId: [
{
required: true,
message: this.$t("message.personnelPosition.mandatory"),
trigger: "change",
},
],
curingPeriod: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur",
},{ type: 'number', message: this.$t('message.projectManage.mustBeNumber')}
],
formingTime: [
{
required: true,
message: this.$t("message.personnelPosition.mandatory"),
trigger: "blur",
},
],
sampleNo: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur",
},
],
sampleNum: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur",
},
],
locationId: [
{
required: true,
message: this.$t("message.personnelPosition.mandatory"),
trigger: "blur",
},
],
},
devList: [],
workerList: [],
dialogVisible: false,
options:[],
expireNotice:[]
};
},
methods: {
getLaborManagementList() {
getLaborManagementInfoList({projectSn: this.$store.state.projectSn, workerName: ''}).then(result => {
if (result.success) {
console.log('劳务人员', result);
this.options = result.result;
}
})
},
getSampleTypeList() {
getstandardSampleTypeListApi({
projectSn: this.$store.state.projectSn,
}).then((result) => {
this.sampleTypeList = result.result;
});
},
getSampleLocationList() {
getstandardLocationListApi({
projectSn: this.$store.state.projectSn,
devSn: this.workerInfo.devSn,
}).then((result) => {
this.sampleLocationList = result.result;
});
},
loadDevList() {
getstandardDevListApi({ projectSn: this.$store.state.projectSn }).then(
(result) => {
this.devList = result.result;
if (this.devList.length > 0) {
this.workerInfo.devSn = this.devList[0].devSn;
this.getSampleLocationList();
this.getWorkerList();
}
}
);
},
addWorker() {
if(this.expireNotice){
this.workerInfo.expireNotice = this.expireNotice.join(',');
}
if (this.type === "add") {
if (this.selectLocationArr.length > 0) {
// this.$message.error("请选择存放位置");
// return;
this.workerInfo.locationId = this.selectLocationArr[0];
if(this.selectLocationArr.length>1){
this.workerInfo.secondLocationId = this.selectLocationArr[1];
}
}
this.$refs.addEditForm.validate((valid) => {
if (valid) {
addstandardSampleRecordApi(this.workerInfo).then((result) => {
if (result.success) {
// console.log("工种添加成功", result);
this.$message.success(result.message);
this.getWorkerList();
this.dialogVisible = false;
}
});
} else {
return false;
}
});
} else if (this.type === "edit") {
if (this.selectLocationArr.length == 0) {
this.$message.error(/* "请选择存放位置" */this.$t('message.projectManage.pleaseChooseSaveLocation'));
return;
}
this.workerInfo.locationId = this.selectLocationArr[
this.selectLocationArr.length - 1
];
this.$refs.addEditForm.validate((valid) => {
if (valid) {
this.workerInfo.parentId = this.workerInfo.parentId
? this.workerInfo.parentId
: 0;
editstandardSampleRecordApi(this.workerInfo).then((result) => {
if (result.success) {
console.log("工种编辑成功", result);
this.$message.success(result.message);
this.getWorkerList();
this.dialogVisible = false;
}
});
} else {
return false;
}
});
} else if (this.type === "delete") {
deletestandardSampleRecordApi({ id: this.workerInfo.id }).then(
(result) => {
if (result.success) {
console.log("工种删除成功", result);
this.$message.success(result.message);
this.getWorkerList();
this.dialogVisible = false;
}
}
);
}
},
PopupBefore(type, worker) {
this.dialogVisible = true;
this.type = type;
this.workerInfo = JSON.parse(JSON.stringify(worker));
this.selectLocationArr = [this.workerInfo.locationId];
if(this.workerInfo.secondLocationId){
this.selectLocationArr.push(this.workerInfo.secondLocationId)
}
if (typeof worker.expireNotice === 'string'&& worker.expireNotice != '') {
this.expireNotice = worker.expireNotice.split(',');
}else{
this.expireNotice = []
}
delete this.workerInfo.addTime;
},
addBefore() {
this.dialogVisible = true;
this.type = "add";
this.workerInfo.curingPeriod = "";
this.workerInfo.formingTime = "";
this.workerInfo.locationId = "";
this.workerInfo.sampleNo = "";
this.workerInfo.sampleNum = "";
this.workerInfo.sampleTypeId = "";
this.workerInfo.secondLocationId = "";
this.expireNotice = []
delete this.workerInfo.id;
delete this.workerInfo.addTime;
},
editBefore(worker) {
this.PopupBefore("edit", worker);
console.log("编辑前", this.type);
},
deleteBefore(worker) {
// this.PopupBefore('delete', worker);
this.type = "delete";
this.workerInfo = worker;
console.log("删除前", this.type);
this.$confirm(
this.$t("message.personnelPosition.beaconManage.table.confirmText") +
"【" +
worker.locationName +
"】?",
this.$t("message.personnelPosition.beaconManage.table.Tips"),
{
confirmButtonText: this.$t(
"message.personnelPosition.confirmButtonText"
),
cancelButtonText: this.$t(
"message.personnelPosition.cancelButtonText"
),
type: "warning",
}
)
.then(() => {
this.addWorker();
})
.catch(() => {});
},
getWorkerList() {
getstandardSampleRecordListApi({
projectSn: this.$store.state.projectSn,
devSn: this.workerInfo.devSn,
}).then((result) => {
if (result.success) this.workerList = result.result;
console.log("工种列表", result);
});
},
},
};
</script>
<style lang="less" scoped>
</style>