zhgdyun/src/views/projectFront/markingRoom/storageLocationManage.vue
2022-06-08 14:51:11 +08:00

277 lines
8.1 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.addAddress") }}
</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="locationName"
:label="$t('message.markRoomOverview.addressName')"
></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.workType.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.parent')">
<el-select v-model="workerInfo.parentId" clearable>
<el-option
v-for="item in workerList"
:key="item.id"
:label="item.locationName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
:label="$t('message.markRoomOverview.addressName')"
prop="locationName"
>
<el-input
v-model="workerInfo.locationName"
:placeholder="$t('message.workType.placeholder')"
></el-input>
</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 {
addstandardLocationApi,
editstandardLocationApi,
deletestandardLocationApi,
getstandardLocationListApi,
getstandardDevListApi,
} from "@/assets/js/api/markingRoom";
export default {
mounted() {
this.loadDevList();
},
data() {
return {
type: "add",
workerInfo: {
locationName: "",
devSn: "",
parentId: "",
projectSn: this.$store.state.projectSn,
},
addEditRules: {
locationName: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur",
},
// {required: true, message: this.$t('message.personnelPosition.required'), trigger: "change"}
],
},
devList: [],
workerList: [],
dialogVisible: false,
};
},
methods: {
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.getWorkerList();
}
}
);
},
addWorker() {
if (this.type === "add") {
this.$refs.addEditForm.validate((valid) => {
if (valid) {
addstandardLocationApi(this.workerInfo).then((result) => {
if (result.success) {
console.log("工种添加成功", result);
this.$message.success(result.message);
this.getWorkerList();
}
});
} else {
return false;
}
});
} else if (this.type === "edit") {
this.$refs.addEditForm.validate((valid) => {
if (valid) {
this.workerInfo.parentId = this.workerInfo.parentId
? this.workerInfo.parentId
: 0;
editstandardLocationApi(this.workerInfo).then((result) => {
if (result.success) {
console.log("工种编辑成功", result);
this.$message.success(result.message);
this.getWorkerList();
}
});
} else {
return false;
}
});
} else if (this.type === "delete") {
deletestandardLocationApi({ 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 = worker;
if (this.workerInfo.parentId == 0) {
this.workerInfo.parentId = "";
}
},
addBefore() {
this.dialogVisible = true;
this.type = "add";
this.workerInfo.parentId = "";
this.workerInfo.locationName = "";
},
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() {
getstandardLocationListApi({
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>