2022-01-11

src/components/modal-cpn/ModalCpn.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-08 16:02:11
- * @LastEditTime: 2022-01-08 17:40:31
+ * @LastEditTime: 2022-01-11 09:05:36
  * @LastEditors: Please set LastEditors
  * @Description: 新增 or 编辑表单
  * @FilePath: \goldenPig\src\components\form-cpn\FormCpn.vue
@@ -22,6 +22,7 @@
               v-if="item.type === 'input'"
               v-model="form[item.field]"
               :placeholder="item.placeholder"
+              clearable
             >
             </el-input>
 
@@ -30,6 +31,7 @@
               v-model="form[item.field]"
               :placeholder="item.placeholder"
               style="width: 100%"
+              clearable
             >
               <el-option
                 v-for="option in item.options"
@@ -48,6 +50,7 @@
               value-format="yyyy-MM-dd"
               v-model="form[item.field]"
               style="width: 100%"
+              clearable
             >
             </el-date-picker>
 

src/components/search-cpn/SearchCpn.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-06 13:53:10
- * @LastEditTime: 2022-01-08 16:24:22
+ * @LastEditTime: 2022-01-11 09:04:54
  * @LastEditors: Please set LastEditors
  * @Description: 搜索组件
  * @FilePath: \goldenPig\src\components\search-cpn\SearchCpn.vue
@@ -17,6 +17,7 @@
                 v-if="item.type === 'input'"
                 v-model="form[item.field]"
                 :placeholder="item.placeholder"
+                clearable
               >
               </el-input>
 
@@ -25,6 +26,7 @@
                 v-model="form[item.field]"
                 :placeholder="item.placeholder"
                 style="width: 100%"
+                clearable
               >
                 <el-option
                   v-for="option in item.options"
@@ -43,6 +45,7 @@
                 value-format="yyyy-MM-dd"
                 v-model="form[item.field]"
                 style="width: 100%"
+                clearable
               >
               </el-date-picker>
 
@@ -69,7 +72,9 @@
               @click="handleSearch"
               >查询</el-button
             >
-            <el-button :size="formStyle.size">重置</el-button>
+            <el-button :size="formStyle.size" @click="handleClear"
+              >重置</el-button
+            >
           </div>
         </el-col>
       </el-row>
@@ -127,6 +132,14 @@ export default {
     handleSearch() {
       this.$emit("handleSearch", this.form);
     },
+    handleClear() {
+      for (const key in this.form) {
+        if (Object.hasOwnProperty.call(this.form, key)) {
+          this.form[key] = undefined;
+        }
+      }
+      this.$emit("clearEvent");
+    },
   },
 };
 </script>

src/components/table-cpn/TableContent.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-08 14:47:24
- * @LastEditTime: 2022-01-08 17:06:51
+ * @LastEditTime: 2022-01-11 14:41:21
  * @LastEditors: Please set LastEditors
  * @Description: 表格
  * @FilePath: \goldenPig\src\components\table-cpn\TableContent.vue
@@ -44,7 +44,7 @@
       </el-table>
     </div>
 
-    <div class="footer">
+    <div class="footer" v-if="footer">
       <el-pagination
         @size-change="sizeChange"
         @current-change="currentChange"
@@ -73,8 +73,8 @@ export default {
     shows: {
       type: Object,
       default: () => ({
-        select: true,
-        index: true,
+        select: false,
+        index: false,
       }),
     },
     dataList: {
@@ -86,6 +86,10 @@ export default {
       default: "small",
     },
     /** 分页 */
+    footer: {
+      type: Boolean,
+      default: true,
+    },
     pageSizes: {
       type: Array,
       default: () => [10, 20, 40, 100],
@@ -121,7 +125,7 @@ export default {
   margin: 15px;
   background-color: #fff;
   border-radius: 5px;
-  padding: 25px;
+  padding: 20px 25px 20px 25px;
 }
 
 .header {

src/components/table-cpn/TableCpn.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-06 16:46:18
- * @LastEditTime: 2022-01-08 18:20:40
+ * @LastEditTime: 2022-01-11 14:40:36
  * @LastEditors: Please set LastEditors
  * @Description: 再封一次
  * @FilePath: \goldenPig\src\components\table-cpn\TableCpn.vue
@@ -15,6 +15,7 @@
       @handleSizeChange="sizeChange"
       @handleCurrentChange="currentChange"
       :tableSize="tableSize"
+      v-bind="tableStyle"
     >
       <template #leftTitle>
         <el-button
@@ -25,9 +26,9 @@
           新增
         </el-button>
       </template>
-      <template #rightHandler>
+      <!-- <template #rightHandler>
         <right-handler v-model="tableSize" @refresh="init"></right-handler>
-      </template>
+      </template> -->
 
       <template v-for="item in propListFilter" #[item.slotName]="scope">
         <div :key="item.label">
@@ -71,14 +72,14 @@
 </template>
 <script>
 import TableContent from "./TableContent.vue";
-import RightHandler from "./RightHandler.vue";
+// import RightHandler from "./RightHandler.vue";
 // 事件总线
 import EventBus from "@/utils/bus.js";
 
 export default {
   components: {
     TableContent,
-    RightHandler,
+    // RightHandler,
   },
   props: {
     propList: {
@@ -86,10 +87,21 @@ export default {
       required: true,
     },
     permission: {
+      // 权限
       type: String,
       required: true,
     },
     requests: {
+      // 网络请求
+      type: Object,
+      required: true,
+    },
+    searchForm: {
+      // 查询参数
+      type: Object,
+      required: true,
+    },
+    tableStyle: {
       type: Object,
       required: true,
     },
@@ -118,13 +130,25 @@ export default {
       _this.init();
     });
   },
+  watch: {
+    searchForm: {
+      handler() {
+        this.init();
+      },
+      deep: true,
+    },
+  },
   methods: {
     // 请求网络数据
     init() {
+      for (const key in this.searchForm) {
+        this.searchForm[key] = this.searchForm[key] ?? undefined;
+      }
       this.requests
         .list({
           size: this.pageSize,
           current: this.currentPage,
+          ...this.searchForm,
         })
         .then((res) => {
           if (res.code === 10000) {

src/utils/chenApi.js

@@ -1,20 +1,13 @@
 /*
  * @Author: your name
- * @Date: 2022-01-08 14:40:20
- * @LastEditTime: 2022-01-08 15:55:10
+ * @Date: 2022-01-11 16:54:24
+ * @LastEditTime: 2022-01-11 16:55:25
  * @LastEditors: Please set LastEditors
- * @Description: 请求
- * @FilePath: \goldenPig\src\utils\chenApi.js
+ * @Description: 基础资料 - 档案管理
+ * @FilePath: \goldenPig\src\utils\apis\basic-data\archivesAdmin.js
  */
-import axios from "./http";
+import axios from "../../http";
 
-/** 
- * 
- * 基础资料 
- * 
- * */
-
-/** 档案管理 */
 export function baseFarmList(params) {
   return axios({
     url: '/eartag/baseFarmInfo/page',

src/utils/apis/basic-data/houseAdmin.js

@@ -0,0 +1,41 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-11 16:53:18
+ * @LastEditTime: 2022-01-11 16:53:51
+ * @LastEditors: Please set LastEditors
+ * @Description: 基础资料 - 栋舍管理
+ * @FilePath: \goldenPig\src\utils\apis\basic-data\houseAdmin.js
+ */
+import axios from "../../http";
+
+export function basePigpenList(params) {
+  return axios({
+    url: '/eartag/basePigpen/page',
+    method: 'post',
+    data: params
+  })
+}
+
+export function basePigpenAdd(params) {
+  return axios({
+    url: '/eartag/basePigpen/add',
+    method: 'post',
+    data: params
+  })
+}
+
+export function basePigpenEdit(params) {
+  return axios({
+    url: '/eartag/basePigpen/update',
+    method: 'post',
+    data: params
+  })
+}
+
+export function basePigpenDel(params) {
+  return axios({
+    url: '/eartag/basePigpen/remove',
+    method: 'get',
+    params: params
+  })
+}

src/views/basic-data/archives-admin/ArchivesAdmin.vue

@@ -1,28 +1,38 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-08 10:36:06
- * @LastEditTime: 2022-01-08 18:06:57
+ * @LastEditTime: 2022-01-11 16:55:49
  * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: 基础资料 - 档案管理
  * @FilePath: \goldenPig\src\views\basic-data\archives-admin\ArchivesAdmin.vue
 -->
 <template>
   <div class="individual-data">
-    <search-cpn v-bind="searchConfig" @handleSearch="handleSearchEvent">
+    <search-cpn
+      v-bind="searchConfig"
+      @handleSearch="handleSearchEvent"
+      @clearEvent="handleClearEvent"
+    >
       <!-- 位置 -->
       <template #location="scope">
         <el-cascader
           :options="options"
           v-model="searchForm2.location"
+          :props="{ checkStrictly: true }"
           @change="getlocation"
           :placeholder="scope.item.placeholder"
           style="width: 100%"
+          clearable
         >
         </el-cascader>
       </template>
     </search-cpn>
 
-    <table-cpn v-bind="tableConfig" @handleAddOrEdit="handleAddOrEditEvent">
+    <table-cpn
+      v-bind="tableConfig"
+      @handleAddOrEdit="handleAddOrEditEvent"
+      :searchForm="searchForm"
+    >
       <!-- 类型 -->
       <template #type="scope">
         {{ types[scope.row.type - 1] }}
@@ -68,7 +78,7 @@ import {
   baseFarmAdd,
   baseFarmEdit,
   baseFarmDel,
-} from "@/utils/chenApi.js";
+} from "@/utils/apis/basic-data/archivesAdmin.js";
 
 export default {
   components: {
@@ -88,6 +98,7 @@ export default {
         location: [],
       },
       options: regionData,
+      searchForm: {},
       // 表格
       tableConfig: {},
       tableDataList: [],
@@ -113,6 +124,9 @@ export default {
         list: baseFarmList,
         del: baseFarmDel,
       },
+      tableStyle: {
+        height: 500,
+      },
     };
     this.modalConfig = {
       modalItemProp,
@@ -126,10 +140,14 @@ export default {
   methods: {
     // 查询按钮 - 获取参数
     handleSearchEvent(params) {
-      console.log("点击了查询按钮，获得的参数", {
+      this.searchForm = {
         ...params,
         ...this.searchForm2,
-      });
+      };
+    },
+    // 清空数据
+    handleClearEvent() {
+      this.searchForm2.location = [];
     },
     // 地点
     getlocation(val) {

src/views/basic-data/archives-admin/config/modal.config.js

@@ -1,17 +1,17 @@
 /*
  * @Author: your name
  * @Date: 2022-01-08 16:08:30
- * @LastEditTime: 2022-01-08 16:09:37
+ * @LastEditTime: 2022-01-11 09:48:18
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \goldenPig\src\views\basic-data\archives-admin\config\modal.config.js
  */
 export const modalItemProp = [
   {
-    label: '牧场名称：',
+    label: '名称：',
     type: 'input',
     field: 'farmName',
-    placeholder: '请输入牧场名称',
+    placeholder: '请输入名称',
   },
   {
     label: '位置：',

src/views/basic-data/archives-admin/config/search.config.js

@@ -1,17 +1,17 @@
 /*
  * @Author: your name
  * @Date: 2022-01-06 14:44:20
- * @LastEditTime: 2022-01-08 17:22:08
+ * @LastEditTime: 2022-01-11 08:44:11
  * @LastEditors: Please set LastEditors
  * @Description: 养殖企业 - 搜索配置
  * @FilePath: \goldenPig\src\views\summary-data\individual-data\search.config.js
  */
 export const formItemProp = [
   {
-    label: '牧场名称：',
+    label: '名称：',
     type: 'input',
     field: 'farmName',
-    placeholder: '请输入牧场名称',
+    placeholder: '请输入名称',
   },
   {
     label: '位置：',

src/views/basic-data/archives-admin/config/table.config.js

@@ -1,15 +1,14 @@
 /*
  * @Author: your name
  * @Date: 2022-01-07 14:43:27
- * @LastEditTime: 2022-01-08 18:26:45
+ * @LastEditTime: 2022-01-11 09:38:01
  * @LastEditors: Please set LastEditors
  * @Description: 养殖企业 - 表格配置
  * @FilePath: \goldenPig\src\views\summary-data\individual-data\config\table.config.js
  */
 export const propList = [
   {
-    label: '名称',
-    width: '120px',
+    label: '牧场名称',
     prop: 'farmName',
     slotName: 'farmName'
   },

src/views/basic-data/house-admin/HouseAdmin.vue

@@ -1,17 +1,172 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-08 10:36:43
- * @LastEditTime: 2022-01-08 10:36:43
+ * @LastEditTime: 2022-01-11 14:43:30
  * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: 基础资料 - 栋舍管理
  * @FilePath: \goldenPig\src\views\basic-data\house-admin\HouseAdmin.vue
 -->
 <template>
-  <div>
-    栋舍管理
+  <div class="house-admin">
+    <!-- <search-cpn
+      v-bind="searchConfig"
+      @handleSearch="handleSearchEvent"
+      @clearEvent="handleClearEvent"
+    >
+    </search-cpn> -->
+
+    <table-cpn
+      v-bind="tableConfig"
+      @handleAddOrEdit="handleAddOrEditEvent"
+      :searchForm="searchForm"
+    >
+      <!-- 状态 -->
+      <template #tempAnomaly="scope">
+        {{ statuses[scope.row.tempAnomaly] }}
+      </template>
+
+      <!-- 阶段 -->
+      <template #stage="scope">
+        {{ stages[scope.row.stage - 1] }}
+      </template>
+    </table-cpn>
+
+    <modal-cpn ref="modal" v-bind="modalConfig" :otherParams="modalForm2">
+      <!-- 位置 -->
+      <template #parentId="scope">
+        <el-cascader
+          :options="options"
+          :value="location"
+          @change="submitLocation"
+          :placeholder="scope.item.placeholder"
+          style="width: 100%"
+        >
+        </el-cascader>
+      </template>
+    </modal-cpn>
   </div>
 </template>
 <script>
-export default {};
+// 搜索
+// import SearchCpn from "@/components/search-cpn";
+// import { formItemProp } from "./config/search.config";
+
+// 表格
+import TableCpn from "@/components/table-cpn";
+import { propList } from "./config/table.config";
+
+// 新增 or 编辑
+import ModalCpn from "@/components/modal-cpn";
+import { modalItemProp } from "./config/modal.config";
+
+import {
+  basePigpenList,
+  basePigpenAdd,
+  basePigpenEdit,
+  basePigpenDel,
+} from "@/utils/chenApi.js";
+
+export default {
+  components: {
+    // SearchCpn,
+    TableCpn,
+    ModalCpn,
+  },
+  data() {
+    return {
+      // 搜索
+      searchConfig: {},
+      searchForm1: {
+        farmName: "",
+        type: "",
+      },
+      searchForm2: {
+        location: [],
+      },
+      searchForm: {},
+      // 表格
+      tableConfig: {},
+      tableDataList: [],
+      stages: ["保育", "配怀", "分娩"],
+      statuses: ["异常", "正常"],
+      // 新增 or 编辑
+      modalConfig: {},
+      modalForm1: {
+        farmName: "",
+        type: "",
+      },
+      options: [],
+      location: [],
+      modalForm2: {
+        parentId: "",
+      },
+    };
+  },
+  created() {
+    // this.searchConfig = { formItemProp, searchForm: this.searchForm1 };
+    this.tableConfig = {
+      propList,
+      permission: "archivesAdmin",
+      requests: {
+        list: basePigpenList,
+        del: basePigpenDel,
+      },
+      tableStyle: {
+        height: 700,
+        footer: false,
+      },
+    };
+    this.modalConfig = {
+      modalItemProp,
+      modalForm: this.modalForm1,
+      requests: {
+        add: basePigpenAdd,
+        edit: basePigpenEdit,
+      },
+    };
+  },
+  methods: {
+    // 查询按钮 - 获取参数
+    handleSearchEvent(params) {
+      this.searchForm = {
+        ...params,
+        ...this.searchForm2,
+      };
+    },
+    // 清空数据
+    handleClearEvent() {
+      this.searchForm2.location = [];
+    },
+    // 地点
+    getlocation(val) {
+      console.log(val);
+    },
+    // 模态框的 位置
+    submitLocation(val) {
+      this.modalForm2.location = val.join();
+    },
+    // 新增 or 编辑事件
+    handleAddOrEditEvent(row) {
+      this.$refs["modal"].init(row);
+      if (row.id) {
+        this.location = row.location.split(",");
+        this.modalForm2.location = row.location;
+      } else {
+        this.location = [];
+        this.modalForm2.location = "";
+      }
+    },
+  },
+  watch: {
+    "searchForm2.location": {
+      handler(newVal) {
+        if (typeof newVal === "object") {
+          this.searchForm2.location = newVal.join();
+        }
+      },
+      deep: true,
+    },
+  },
+};
 </script>
 <style scoped></style>

src/views/basic-data/house-admin/config/modal.config.js

@@ -0,0 +1,71 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-08 16:08:30
+ * @LastEditTime: 2022-01-11 16:51:23
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \goldenPig\src\views\basic-data\archives-admin\config\modal.config.js
+ */
+export const modalItemProp = [
+  {
+    label: '牧场名称：',
+    type: 'select',
+    field: 'farmCode',
+    placeholder: '请选择牧场名称',
+  },
+  {
+    label: '上级：',
+    type: 'custom',
+    field: 'parentId',
+    slotName: 'parentId',
+    placeholder: '请选择上级'
+  },
+  {
+    label: '栋舍名称：',
+    type: 'input',
+    field: 'pigpenName',
+    placeholder: '请输入栋舍名称',
+  },
+  {
+    label: '猪舍温度(℃)：',
+    type: 'input',
+    field: 'pigpenTemp',
+    placeholder: '请输入猪舍温度',
+  },
+  {
+    label: '状态：',
+    type: 'select',
+    field: 'tempAnomaly',
+    placeholder: '请选择状态',
+    options: [
+      {
+        value: 1,
+        label: '正常'
+      },
+      {
+        value: 0,
+        label: '异常'
+      }
+    ]
+  },
+  {
+    label: '阶段：',
+    type: 'select',
+    field: 'stage',
+    placeholder: '请选择状态',
+    options: [
+      {
+        value: 1,
+        label: '保育'
+      },
+      {
+        value: 2,
+        label: '配怀'
+      },
+      {
+        value: 3,
+        label: '分娩'
+      }
+    ]
+  },
+]

src/views/basic-data/house-admin/config/search.config.js

@@ -0,0 +1,43 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-06 14:44:20
+ * @LastEditTime: 2022-01-11 14:37:58
+ * @LastEditors: Please set LastEditors
+ * @Description: 养殖企业 - 搜索配置
+ * @FilePath: \goldenPig\src\views\summary-data\individual-data\search.config.js
+ */
+export const formItemProp = [
+  {
+    label: '牧场名称：',
+    type: 'input',
+    field: 'farmName',
+    placeholder: '请选择牧场名称',
+  },
+  {
+    label: '栋舍名称：',
+    type: 'custom',
+    field: 'pigpenName',
+    slotName: 'pigpenName',
+    placeholder: '请选择位置'
+  },
+  {
+    label: '企业类型：',
+    type: 'select',
+    field: 'type',
+    placeholder: '请选择企业类型',
+    options: [
+      {
+        label: '屠宰企业',
+        value: 1
+      },
+      {
+        label: '养殖企业',
+        value: 2
+      },
+      {
+        label: '检疫机构',
+        value: 3
+      }
+    ]
+  },
+]

src/views/basic-data/house-admin/config/table.config.js

@@ -0,0 +1,45 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-07 14:43:27
+ * @LastEditTime: 2022-01-11 14:23:09
+ * @LastEditors: Please set LastEditors
+ * @Description: 养殖企业 - 表格配置
+ * @FilePath: \goldenPig\src\views\summary-data\individual-data\config\table.config.js
+ */
+export const propList = [
+  {
+    label: '牧场名称',
+    prop: 'farmName',
+    slotName: 'farmName'
+  },
+  {
+    label: '栋舍名称',
+    prop: 'pigpenName',
+    slotName: 'pigpenName'
+  },
+  {
+    label: '猪舍温度',
+    prop: 'pigpenTemp',
+    slotName: 'pigpenTemp'
+  },
+  {
+    label: '猪舍状态',
+    prop: 'pigpenAnomaly',
+    slotName: 'pigpenAnomaly'
+  },
+  {
+    label: '阶段',
+    prop: 'stage',
+    slotName: 'stage'
+  },
+  {
+    label: '创建时间',
+    prop: 'createTime',
+    slotName: 'createTime'
+  },
+  {
+    label: '操作',
+    slotName: 'handler',
+    width: '200px'
+  }
+]