|
|
@@ -1,19 +1,36 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2022-01-08 10:36:43
|
|
|
- * @LastEditTime: 2022-01-12 15:58:00
|
|
|
+ * @LastEditTime: 2022-01-19 16:29:18
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
* @Description: 基础资料 - 栋舍管理
|
|
|
* @FilePath: \goldenPig\src\views\basic-data\house-admin\HouseAdmin.vue
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="house-admin">
|
|
|
- <!-- <search-cpn
|
|
|
+ <search-cpn
|
|
|
v-bind="searchConfig"
|
|
|
@handleSearch="handleSearchEvent"
|
|
|
@clearEvent="handleClearEvent"
|
|
|
>
|
|
|
- </search-cpn> -->
|
|
|
+ <template #farmId="scope">
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm2.farmId"
|
|
|
+ :placeholder="scope.item.placeholder"
|
|
|
+ style="width: 100%"
|
|
|
+ clearable
|
|
|
+ v-if="userItem.type === 0"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="option in farmList"
|
|
|
+ :key="option.id"
|
|
|
+ :value="option.id"
|
|
|
+ :label="option.farmName"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </search-cpn>
|
|
|
|
|
|
<table-cpn
|
|
|
v-bind="tableConfig"
|
|
|
@@ -22,33 +39,21 @@
|
|
|
>
|
|
|
<!-- 状态 -->
|
|
|
<template #tempAnomaly="scope">
|
|
|
- {{ statuses[scope.row.tempAnomaly] }}
|
|
|
+ {{ statuses[scope.row.tempAnomaly - 1] }}
|
|
|
</template>
|
|
|
|
|
|
<!-- 阶段 -->
|
|
|
<template #stage="scope">
|
|
|
- {{ stages[scope.row.stage - 1] }}
|
|
|
+ {{ stageList[scope.row.stage - 1].label }}
|
|
|
</template>
|
|
|
</table-cpn>
|
|
|
|
|
|
- <modal-cpn ref="modal" v-bind="modalConfig" :otherParams="modalForm2">
|
|
|
- <!-- 牧场名称 -->
|
|
|
- <template #farmId="scope">
|
|
|
- <el-select
|
|
|
- v-model="modalForm2.farmId"
|
|
|
- :placeholder="scope.item.placeholder"
|
|
|
- style="width: 100%"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="option in farmList"
|
|
|
- :key="option.label"
|
|
|
- v-bind="option"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
-
|
|
|
+ <modal-cpn
|
|
|
+ ref="modal"
|
|
|
+ v-bind="modalConfig"
|
|
|
+ :otherParams="modalForm2"
|
|
|
+ :title="title"
|
|
|
+ >
|
|
|
<!-- 上级 -->
|
|
|
<template #parentId="scope">
|
|
|
<el-cascader
|
|
|
@@ -56,7 +61,6 @@
|
|
|
:props="{ checkStrictly: true }"
|
|
|
:value="pigpenSelected"
|
|
|
:disabled="optionsDisabled"
|
|
|
- @focus="handlePigpenFocus"
|
|
|
@change="submitParentId"
|
|
|
:placeholder="scope.item.placeholder"
|
|
|
style="width: 100%"
|
|
|
@@ -68,8 +72,8 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
// 搜索
|
|
|
-// import SearchCpn from "@/components/search-cpn";
|
|
|
-// import { formItemProp } from "./config/search.config";
|
|
|
+import SearchCpn from "@/components/search-cpn";
|
|
|
+import { formItemProp } from "./config/search.config";
|
|
|
|
|
|
// 表格
|
|
|
import TableCpn from "@/components/table-cpn";
|
|
|
@@ -87,45 +91,48 @@ import {
|
|
|
basePigpenOptions, // 栋舍表二级，用于模态框
|
|
|
} from "@/utils/apis/basic-data/houseAdmin.js";
|
|
|
|
|
|
-import { baseFarmAll } from "@/utils/apis/basic-data/archivesAdmin.js";
|
|
|
+// import { baseFarmAll } from "@/utils/apis/basic-data/archivesAdmin.js";
|
|
|
+
|
|
|
+// Vuex
|
|
|
+import { mapState } from "vuex";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- // SearchCpn,
|
|
|
+ SearchCpn,
|
|
|
TableCpn,
|
|
|
ModalCpn,
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState(["farmList", "farmId", "stageList"]),
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ userItem: null, // 用户身份
|
|
|
// 搜索
|
|
|
searchConfig: {},
|
|
|
searchForm1: {
|
|
|
- farmId: "",
|
|
|
- parentId: "",
|
|
|
- pigpenName: "",
|
|
|
- pigpenTemp: "",
|
|
|
- tempAnomaly: "",
|
|
|
- stage: "",
|
|
|
+ pigpenName: undefined,
|
|
|
},
|
|
|
searchForm2: {
|
|
|
- location: [],
|
|
|
+ farmId: undefined,
|
|
|
+ },
|
|
|
+ searchForm: {
|
|
|
+ pigpenName: undefined,
|
|
|
+ farmId: undefined,
|
|
|
},
|
|
|
- searchForm: {},
|
|
|
// 表格
|
|
|
tableConfig: {},
|
|
|
tableDataList: [],
|
|
|
- stages: ["保育", "配怀", "分娩"],
|
|
|
- statuses: ["异常", "正常"],
|
|
|
+ statuses: ["正常", "异常"],
|
|
|
// 新增 or 编辑
|
|
|
modalConfig: {},
|
|
|
+ title: "",
|
|
|
modalForm1: {
|
|
|
pigpenName: "",
|
|
|
pigpenTemp: "",
|
|
|
- tempAnomaly: "",
|
|
|
+ tempAnomaly: 1,
|
|
|
stage: "",
|
|
|
},
|
|
|
- farmList: [], // 名下所有牧场
|
|
|
- pigpenAllList: [], // 所有的栋舍(二级)
|
|
|
pigpenList: [], // 根据牧场所确定的栋舍(二级)
|
|
|
pigpenSelected: [],
|
|
|
modalForm2: {
|
|
|
@@ -137,7 +144,17 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- // this.searchConfig = { formItemProp, searchForm: this.searchForm1 };
|
|
|
+ // 获取用户身份
|
|
|
+ this.userItem = JSON.parse(localStorage.getItem("gold_UserItem"));
|
|
|
+ if (this.userItem.type === 0 && this.farmList.length > 0) {
|
|
|
+ this.searchForm2.farmId = this.farmList[0]?.id;
|
|
|
+ this.searchForm.farmId = this.farmList[0]?.id;
|
|
|
+ this.modalForm2.farmId = this.farmList[0]?.id;
|
|
|
+ }
|
|
|
+ this.searchConfig = {
|
|
|
+ formItemProp,
|
|
|
+ searchForm: { ...this.searchForm1 },
|
|
|
+ };
|
|
|
this.tableConfig = {
|
|
|
propList,
|
|
|
permission: "archivesAdmin",
|
|
|
@@ -159,6 +176,38 @@ export default {
|
|
|
edit: basePigpenEdit,
|
|
|
},
|
|
|
};
|
|
|
+ this.modalConfig.modalItemProp[4].options = this.stageList;
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ farmId: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (!newVal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.userItem && this.userItem.type !== 0) {
|
|
|
+ // 确定默认选中牧场
|
|
|
+ this.searchForm2.farmId = newVal;
|
|
|
+ this.searchForm.farmId = newVal;
|
|
|
+ this.modalForm2.farmId = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ farmList: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (!newVal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.userItem && this.userItem.type === 0) {
|
|
|
+ // 确定默认选中牧场
|
|
|
+ this.searchForm2.farmId = newVal[0]?.id;
|
|
|
+ this.searchForm.farmId = newVal[0]?.id;
|
|
|
+ this.modalForm2.farmId = newVal[0]?.id;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 查询按钮 - 获取参数
|
|
|
@@ -170,38 +219,29 @@ export default {
|
|
|
},
|
|
|
// 清空数据
|
|
|
handleClearEvent() {
|
|
|
- this.searchForm2.location = [];
|
|
|
+ this.searchForm2.farmId = undefined;
|
|
|
+ this.searchForm.farmId = undefined;
|
|
|
},
|
|
|
// 模态框的 上级
|
|
|
submitParentId(val) {
|
|
|
this.modalForm2.parentId = val[val.length - 1];
|
|
|
this.modalForm2.type = val.length;
|
|
|
- // this.modalForm2.location = val.join();
|
|
|
- },
|
|
|
- // 选择上级之前，需要先选择牧场名称
|
|
|
- handlePigpenFocus() {
|
|
|
- if (!this.modalForm2.farmId) {
|
|
|
- this.$message.warning("请先选择牧场名称");
|
|
|
- }
|
|
|
},
|
|
|
// 新增 or 编辑事件
|
|
|
async handleAddOrEditEvent(row) {
|
|
|
- this.modalForm2.farmId = "";
|
|
|
- /* 牧场选择 */
|
|
|
- const { code, data, message } = await baseFarmAll({});
|
|
|
- if (code === 10000) {
|
|
|
- this.farmList = data.map((item) => {
|
|
|
- return {
|
|
|
- value: item.id,
|
|
|
- label: item.farmName,
|
|
|
- };
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message.error(message, "无法选择牧场");
|
|
|
- return;
|
|
|
+ // 牧场
|
|
|
+ this.modalForm2.farmId = this.searchForm2.farmId;
|
|
|
+ /* 模态框标题 - 牧场名称 */
|
|
|
+ if (this.userItem.type === 0) {
|
|
|
+ const farm = this.farmList.find(
|
|
|
+ (item) => item.id === this.modalForm2.farmId
|
|
|
+ );
|
|
|
+ this.title = farm.farmName;
|
|
|
}
|
|
|
/* 栋舍表二级 */
|
|
|
- const pigpenOptions = await basePigpenOptions({});
|
|
|
+ const pigpenOptions = await basePigpenOptions({
|
|
|
+ farmId: this.modalForm2.farmId,
|
|
|
+ });
|
|
|
if (pigpenOptions.code === 10000) {
|
|
|
// 递归函数：使返回值符合级联选择器的 label value
|
|
|
const recursive = (arr) => {
|
|
|
@@ -217,13 +257,17 @@ export default {
|
|
|
};
|
|
|
});
|
|
|
};
|
|
|
- this.pigpenAllList = recursive(pigpenOptions.data);
|
|
|
+ this.pigpenList = [
|
|
|
+ {
|
|
|
+ label: "顶级",
|
|
|
+ value: 0,
|
|
|
+ children: recursive(pigpenOptions.data),
|
|
|
+ },
|
|
|
+ ];
|
|
|
} else {
|
|
|
- this.$message.error(message, "无法选择上级");
|
|
|
+ this.$message.error(pigpenOptions.message, "无法选择上级");
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
- // this.modalConfig.modalItemProp[0].options = allFarms.
|
|
|
this.$refs["modal"].init(row);
|
|
|
if (row.id) {
|
|
|
this.modalForm2.farmId = row.farmId;
|
|
|
@@ -237,33 +281,11 @@ export default {
|
|
|
this.pigpenSelected = [0];
|
|
|
}
|
|
|
} else {
|
|
|
- this.modalForm2.farmId = "";
|
|
|
this.pigpenSelected = [];
|
|
|
this.modalForm2.type = "";
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- watch: {
|
|
|
- "modalForm2.farmId": {
|
|
|
- handler(newVal) {
|
|
|
- this.optionsDisabled = false;
|
|
|
- if (!newVal) {
|
|
|
- this.optionsDisabled = false;
|
|
|
- return;
|
|
|
- }
|
|
|
- let pigpenList = this.pigpenAllList.filter((item) => {
|
|
|
- return item.farmId === this.modalForm2.farmId;
|
|
|
- });
|
|
|
- this.pigpenList = [
|
|
|
- {
|
|
|
- label: "顶级",
|
|
|
- value: 0,
|
|
|
- children: pigpenList,
|
|
|
- },
|
|
|
- ];
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped></style>
|
East