档案盘点 页面搭建与测试

src/views/archivesManage/archivesCheck/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="app-container container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
+    <div class="head-container">
+      <eHeader :dict="dict" :permission="permission" />
+      <crudOperation :permission="permission" />
+    </div>
+    档案盘点-------crud测试
+  </div>
+</template>
+
+<script>
+import eHeader from './module/header'
+import CRUD, { presenter } from '@crud/crud'
+import crudJob from '@/api/system/job'
+import crudOperation from '@crud/CRUD.operation'
+
+export default {
+  name: 'Job',
+  components: { eHeader, crudOperation },
+  cruds() {
+    return CRUD({
+      title: '岗位',
+      url: 'api/job',
+      sort: ['jobSort,asc', 'id,desc'],
+      crudMethod: { ...crudJob }
+    })
+  },
+  mixins: [presenter()],
+  dicts: ['job_status'],
+
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'job:add'],
+        edit: ['admin', 'job:edit'],
+        del: ['admin', 'job:del']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  color: #fff;
+}
+</style>

src/views/archivesManage/archivesCheck/module/header.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    v-if="crud.props.searchToggle"
+    class="head-search"
+  >
+    <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+    <date-range-picker v-model="query.createTime" class="date-item" />
+    <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
+      <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
+      <el-option v-for="item in dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <rrOperation />
+  </div>
+</template>
+
+<script>
+import { header } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import DateRangePicker from '@/components/DateRangePicker'
+export default {
+  components: { rrOperation, DateRangePicker },
+  mixins: [header()],
+  props: {
+    dict: {
+      type: Object,
+      required: true
+    },
+    permission: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>