工作犬复训页面样式

src/router/modules/index.js

@@ -143,8 +143,10 @@ export default [
         meta: {
           title: '工作犬复训管理',
           isOneMenu: false,
+          keepAlive: true,
           oneMenuName: 'jqjsgzgl',
-          paixu: 2
+          paixu: 2,
+          routeNames: []
         }
       },
       // 工作犬等级评定管理（二级菜单）

src/views/jobDogManage/index.vue

 <template>
-  <div>工作犬复训管理</div>
+  <div class="listContentClass">
+    <div class="contents">
+      <div
+        class="titles"
+        style="width: 72px;"
+      >查询条件</div>
+      {{formData}}
+      <el-form
+        :model="formData"
+        ref="formDataRef"
+        :inline="true"
+      >
+        <el-form-item
+          label="芯片号"
+          class="elItemClass"
+        >
+          <el-input
+            v-model="formData.chipCode"
+            :clearable="true"
+            placeholder="请输入芯片号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="警犬名称"
+          class="elItemClass"
+        >
+          <el-input
+            v-model="formData.name"
+            :clearable="true"
+            placeholder="请输入警犬名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="归属单位"
+          class="elItemClass"
+        >
+          <lazy-select-tree-dialog
+            :sendId="formData.trainingUnit"
+            :formData="formData"
+            :currentItem="unitInfo"
+          />
+        </el-form-item>
+        <el-form-item
+          label="培训日期"
+          class="elItemClass elDateClass"
+        >
+          <el-date-picker
+            v-model="formData.peixunDate"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择培训日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div class="queryBtnsClass">
+        <el-button
+          type="text"
+          size="small"
+          class="btnStylePub"
+          @click="handleHeaderSettings"
+        >
+          表头配置
+        </el-button>
+        <el-button
+          type="primary"
+          size="small"
+          class="btnStylePub"
+          @click="getLists(1)"
+        >
+          查询
+        </el-button>
+        <el-button
+          size="small"
+          @click="resetForm"
+          style="margin-right: 0 !important;"
+          class="btnStylePub"
+        >
+          重置
+        </el-button>
+      </div>
+
+      <div class="hengLine"></div>
+
+      <div class="resultClass spaceBetween">
+        <div class="leftC">
+          <div
+            class="titles"
+            style="display: inline-block;width: 72px;"
+          >查询结果</div>
+          <span class="infoClass">共有 <span class="numColor">{{ total }}</span> 条查询结果，共 <span class="numColor">{{ Math.ceil(total / limit) }}</span> 页；</span>
+        </div>
+        <div class="rightC">
+          <el-button
+            icon="el-icon-plus"
+            size="small"
+            type="primary"
+            plain
+            class="btnStylePub btnStyle1"
+            @click="addData"
+          >新增</el-button>
+          <el-button
+            size="small"
+            icon="el-icon-download"
+            type="warning"
+            class="btnStylePub btnStyle2"
+            @click="importData"
+          >批量导入</el-button>
+          <el-button
+            size="small"
+            icon="el-icon-upload2"
+            style="margin-right: 0 !important;"
+            type="primary"
+            class="btnStylePub btnStyle3"
+            @click="exportData"
+          >导出</el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="tableLoading"
+        element-loading-text="拼命加载中"
+        ref="tableRef"
+        :data="tableData"
+        tooltip-effect="dark"
+        max-height="600"
+        width="100%"
+        size="small"
+        class="elTableClass"
+      >
+        <el-table-column
+          align="left"
+          label="操作"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <div>
+              <el-button
+                type="text"
+                size="small"
+                @click="editData(scope.row)"
+              >
+                补采
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                @click="deleteData(scope.row)"
+              >删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="'项目'"
+          :align="'left'"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            {{ scope.row.xm }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pageClass">
+        <el-pagination
+          class="elPage"
+          background
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          :page-size="limit"
+          layout="prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import LazySelectTreeDialog from "@c/lazy_treeCode_components.vue";
+
 export default {
+  name: "jobDogManage",
+  components: {
+    LazySelectTreeDialog,
+  },
   data() {
-    return {};
+    return {
+      formData: {
+        chipCode: "",
+        name: "",
+        trainingUnit: "",
+        peixunDate: "",
+      },
+
+      tableLoading: false,
+      tableData: [
+        {
+          id: 1,
+          xm: "haha",
+        },
+      ],
+
+      currentPage: 1,
+      limit: 10,
+      total: 0,
+
+      unitInfo: {
+        name: "归属单位:",
+        id: "trainingUnit",
+        type: "lazyCodeTreeDialog",
+        value: "",
+        prop: "checkEmpty",
+        placeholder: "请选择归属单位",
+        col: "2",
+        disabled: false,
+        codeTree: "CODE_QGUNIT",
+        codeOptions: [],
+      },
+
+      showImportBox: false,
+
+      showHeaderSettingBox: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    resetForm() {
+      this.formData.chipCode = "";
+      this.formData.name = "";
+      this.formData.peixunDate = "";
+      this.formData.trainingUnit = "";
+
+      this.getLists(1);
+    },
+    getLists(current) {},
+    addData() {
+      // this.$router.push({ name: "poDogJobManageAdd" });
+    },
+    editData(row) {},
+    deleteData(row) {},
+    importData() {
+      this.showImportBox = true;
+    },
+    exportData() {},
+    handleCurrentChange(current) {
+      this.currentPage = current;
+      this.getLists(current);
+    },
+    // 配置表头
+    handleHeaderSettings() {
+      this.showHeaderSettingBox = true;
+    },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/listContent.scss";
+</style>