招工就业

packages/wechat/AppJob/AppJob.vue

@@ -1,68 +1,105 @@
 <template>
-  <div class="appjob">
-    <keep-alive :include="['List']">
-      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
-    </keep-alive>
-  </div>
+  <ai-list v-if="!isShowDetail">
+    <template slot="title">
+      <ai-title title="居民管理" :isShowBottomBorder="false"></ai-title>
+    </template>
+    <template slot="tabs">
+      <el-tabs v-model="currIndex">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
+          <component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance" :dict="dict" :permissions="permissions"/>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+  </ai-list>
+  <AddJob v-else-if="componentName === 'AddJob' && isShowDetail" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></AddJob>
+  <Add v-else-if="componentName === 'Add' && isShowDetail" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Add>
 </template>
 
 <script>
-import List from './components/List'
-import Add from './components/Add'
+  import List from './components/List.vue'
+  import JobList from './components/JobList'
+  import Add from './components/Add'
+  import AddJob from './components/AddJob'
+  import { mapState } from 'vuex'
 
-export default {
-  label: '招工就业',
-  name: 'AppJob',
-  // 组件
-  components: { Add, List },
-  props: {
-    instance: Function,
-    dict: Object,
-    permissions: Function,
-  },
-  data() {
-    return {
-      component: 'List',
-      params: {},
-      include: [],
-    }
-  },
-  // 计算
-  computed: {},
-  // 监听
-  watch: {},
-  // 实例创建后
-  created() {},
-  // 实例创建后
-  onShow() {},
-  // 实例渲染后
-  mounted() {},
-  // 方法
-  methods: {
-    onChange(data) {
-      if (data.type === 'Add') {
-        this.component = 'Add'
-        this.params = data.params
-      }
+  export default {
+    name: 'AppJob',
+    label: '招工就业',
 
-      if (data.type === 'list') {
-        this.component = 'List'
-        this.params = data.params
+    components: {
+      JobList,
+      AddJob,
+      List,
+      Add
+    },
 
-        this.$nextTick(() => {
-          if (data.isRefresh) {
-            this.$refs.component.getList()
-          }
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+
+    computed: {
+      ...mapState(['user']),
+
+      tabs () {
+        const tabList = [
+          {label: '找能人', name: 'List', comp: List, permission: ''},
+          {label: '找工作', name: 'Statistics', comp: JobList, permission: ''}
+        ].filter(item => {
+          return true
         })
+
+        return tabList
       }
     },
-  },
-}
+
+    data () {
+      return {
+        activeName: 'List',
+        currIndex: '0',
+        componentName: '',
+        params: {},
+        isShowDetail: false
+      }
+    },
+
+    created () {
+      if (this.$route.query.id) {
+        this.componentName = this.$route.query?.type
+        this.params = {id: this.$route.query?.id}
+        this.isShowDetail = true
+      }
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'List') {
+          this.componentName = 'List'
+          this.isShowDetail = false
+          this.params = data.params
+        }
+
+        if (data.type === 'Add') {
+          this.componentName = 'Add'
+          this.isShowDetail = true
+          this.params = data.params
+        }
+        if (data.type === 'JobList') {
+          this.componentName = 'JobList'
+          this.isShowDetail = false
+          this.params = data.params
+        }
+
+        if (data.type === 'AddJob') {
+          this.componentName = 'AddJob'
+          this.isShowDetail = true
+          this.params = data.params
+        }
+      }
+    }
+  }
 </script>
 
-<style scoped lang="scss">
-.appjob {
-  width: 100%;
-  height: 100%;
-}
+<style lang="scss" scoped>
 </style>

packages/wechat/AppJob/components/Add.vue

@@ -180,7 +180,7 @@ export default {
     // 返回按钮
     cancel(isRefresh) {
       this.$emit('change', {
-        type: 'list',
+        type: 'List',
         isRefresh: isRefresh ? true : false,
       })
     },

packages/wechat/AppJob/components/AddJob.vue

@@ -0,0 +1,116 @@
+<template>
+  <ai-detail>
+    <template #title>
+      <ai-title title="添加招工就业信息" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template #content>
+      <el-form class="ai-form" :model="formData" ref="ruleForm" :rules="formRules">
+        <ai-card title="基础信息">
+          <div slot="content" class="ai-content">
+            <el-form-item label="标题" prop="title" style="width: 100%">
+              <el-input placeholder="请输入" size="small" v-model="formData.title" maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="联系人" prop="linkName" style="width: 100%">
+              <el-input size="small" placeholder="请输入联系人" v-model="formData.linkName" maxlength="20" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="联系方式" prop="linkPhone" style="width: 100%">
+              <el-input size="small" placeholder="请输入联系方式" v-model="formData.linkPhone" show-word-limit></el-input>
+            </el-form-item>
+          </div>
+        </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Add',
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object,
+    },
+    data() {
+      return {
+        info: {},
+        id: '',
+        formData: {
+          title: '',
+          linkPhone: '',
+          linkName: '',
+          type: 1
+        },
+        formRules: {
+          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+          linkPhone: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+          linkName: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
+        },
+      }
+    },
+
+    created() {
+      this.dict.load('JobGender').then(() => {})
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfoList(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfoList(id) {
+        this.instance.post(`/app/appjob/detail?id=${id}`).then((res) => {
+          if (res.code === 0) {
+            this.formData = res.data
+            window.console.log(this.info)
+          }
+        })
+      },
+
+      confirm() {
+        this.$refs['ruleForm'].validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appjob/addOrUpdate`, {
+              ...this.formData,
+              type: 1,
+              id: this.id || ''
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              }
+            })
+          }
+        })
+      },
+
+      cancel(isRefresh) {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: isRefresh ? true : false,
+        })
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+::v-deep.ai-form {
+  display: flex;
+  flex-direction: column;
+  .ai-card {
+    .ai-content {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

packages/wechat/AppJob/components/JobList.vue

@@ -0,0 +1,126 @@
+<template>
+  <ai-list class="notice" isTabs>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.title"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="search.current = 1, search.title, getList()"
+            placeholder="请输入标题"
+            clearable
+            @clear="search.current = 1, search.title = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'JobList',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      moduleId: String
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          title: ''
+        },
+        currIndex: -1,
+        areaList: [],
+        total: 10,
+        colConfigs: [
+          { prop: 'title',  label: '标题', align: 'left', width: '200px' },
+          { prop: 'linkPhone', label: '联系方式', align: 'center' },
+          { prop: 'createUserName', label: '发布人', align: 'center' },
+          { prop: 'createTime', label: '发布时间', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        areaName: '',
+        unitName: '',
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    mounted() {
+      this.search.areaId = this.user.info.areaId
+      this.getList()
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appjob/list`, null, {
+          params: {
+            ...this.search,
+            type: 1
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appjob/delete?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'AddJob',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .notice {
+  }
+</style>

packages/wechat/AppJob/components/List.vue

@@ -1,77 +1,67 @@
 <template>
-  <section class="list">
-    <ai-list>
-      <!-- 标题 -->
-      <ai-title slot="title" title="招工就业" isShowBottomBorder />
-
-      <template #custom>
-        <!-- 卡片 -->
-        <el-row type="flex" class="staDataPane">
-          <div class="boxItem">
-            <div>招聘单位总数</div>
-            <b>{{ staData.countCompany || 0 }}</b>
-          </div>
-
-          <div class="boxItem">
-            <div>招聘岗位总数</div>
-            <b>{{ staData.countTotal || 0 }}</b>
-          </div>
-
-          <div class="boxItem">
-            <div>招聘人员总数</div>
-            <b>{{ staData.countUser || 0 }}</b>
-          </div>
-        </el-row>
-
-        <!-- 内容 -->
-        <div class="mainPane">
-          <ai-search-bar>
-            <template slot="left">
-              <!-- 性别下拉选择框 -->
-              <ai-select v-model="searchObj.gender" placeholder="请选择性别" clearable @change=";(page.current = 1), getList()" :selectList="dict.getDict('JobGender')"></ai-select>
-            </template>
-
-            <!-- 搜索 -->
-            <template slot="right"> <el-input v-model="searchObj.title" size="small" placeholder="请输入单位名称" clearable @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (searchObj.title = ''), getList()" suffix-icon="iconfont iconSearch"/></template>
-          </ai-search-bar>
-
-          <ai-search-bar>
-            <!-- 添加 -->
-            <template #left>
-              <el-button type="primary" icon="iconfont iconAdd" size="small" @click="add('')">添加</el-button>
-              <el-button icon="iconfont iconDelete" size="small" @click="toDelete()" :disabled="ids.length == 0">删除</el-button>
-            </template>
-
-            <!-- 导入导出 -->
-            <template #right>
-              <ai-import :instance="instance" :dict="dict" type="appjob" name="招工就业" @success="getList(), $message.success('导入成功!')">
-                <el-button icon="iconfont iconImport">导入</el-button>
-              </ai-import>
-
-              <ai-download :instance="instance" url="/app/appjob/listExport" :params="param" fileName="招工就业模板" />
-            </template>
-          </ai-search-bar>
-
-          <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @selection-change="(v) => (ids = v.map((e) => e.id))" @getList="getList">
-            <!-- 是否启用 -->
-            <el-table-column label="是否启用" slot="status" align="center" width="80">
-              <template v-slot="{ row }">
-                <el-switch v-model="row.status" @change="onChange(row)" active-value="1" inactive-value="0" active-color="#5088FF" inactive-color="#D0D4DC"> </el-switch>
-              </template>
-            </el-table-column>
-
-            <!-- 操作 -->
-            <el-table-column label="操作" align="center" width="140" slot="options">
-              <template slot-scope="{ row }">
-                <el-button type="text" @click="add(row.id)">编辑</el-button>
-                <el-button type="text" @click="toDelete(row.id)">删除</el-button>
-              </template>
-            </el-table-column>
-          </ai-table>
+  <ai-list isTabs class="list">
+    <template #content>
+      <div class="statistics-top">
+        <div class="statistics-top__item">
+          <span>招聘单位总数</span>
+          <h2 style="color: #2266FF;">{{ staData.countCompany || 0 }}</h2>
         </div>
-      </template>
-    </ai-list>
-  </section>
+        <div class="statistics-top__item">
+          <span>招聘岗位总数</span>
+          <h2 style="color: #22AA99;">{{ staData.countTotal || 0 }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>招聘人员总数</span>
+          <h2 style="color: #F8B425">{{ staData.countUser || 0 }}</h2>
+        </div>
+      </div>
+      <div class="content">
+        <ai-search-bar bottomBorder>
+          <template slot="left">
+            <!-- 性别下拉选择框 -->
+            <ai-select v-model="searchObj.gender" placeholder="请选择性别" clearable @change=";(page.current = 1), getList()" :selectList="dict.getDict('JobGender')"></ai-select>
+          </template>
+
+          <!-- 搜索 -->
+          <template slot="right"> <el-input v-model="searchObj.title" size="small" placeholder="请输入单位名称" clearable @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (searchObj.title = ''), getList()" suffix-icon="iconfont iconSearch"/></template>
+        </ai-search-bar>
+
+        <ai-search-bar style="margin-top: 16px;">
+          <!-- 添加 -->
+          <template #left>
+            <el-button type="primary" icon="iconfont iconAdd" size="small" @click="add('')">添加</el-button>
+            <el-button icon="iconfont iconDelete" size="small" @click="toDelete()" :disabled="ids.length == 0">删除</el-button>
+          </template>
+
+          <!-- 导入导出 -->
+          <template #right>
+            <ai-import :instance="instance" :dict="dict" type="appjob" name="招工就业" @success="getList(), $message.success('导入成功!')">
+              <el-button icon="iconfont iconImport">导入</el-button>
+            </ai-import>
+
+            <ai-download :instance="instance" url="/app/appjob/listExport" :params="param" fileName="招工就业模板" />
+          </template>
+        </ai-search-bar>
+
+        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @selection-change="(v) => (ids = v.map((e) => e.id))" @getList="getList">
+          <!-- 是否启用 -->
+          <el-table-column label="是否启用" slot="status" align="center" width="80">
+            <template v-slot="{ row }">
+              <el-switch v-model="row.status" @change="onChange(row)" active-value="1" inactive-value="0" active-color="#5088FF" inactive-color="#D0D4DC"> </el-switch>
+            </template>
+          </el-table-column>
+
+          <!-- 操作 -->
+          <el-table-column label="操作" align="center" width="140" slot="options">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="add(row.id)">编辑</el-button>
+              <el-button type="text" @click="toDelete(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </div>
+    </template>
+  </ai-list>
 </template>
 
 <script>
@@ -230,62 +220,53 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.list {
-  height: 100%;
+  .list {
+    ::v-deep .ai-list__content {
+      padding: 0!important;
 
-  ::v-deep .ai-list__content {
-    padding: 0 16px 16px !important;
-    box-sizing: border-box;
-
-    .ai-list__content--wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
+      .ai-list__content--right-wrapper {
+        background: transparent!important;
+        box-shadow: none!important;
+        margin: 0!important;
+        padding: 12px 0 12px!important;
+      }
     }
-  }
-
-  ::v-deep .staDataPane {
-    width: 100%;
-    gap: 16px;
-    padding-top: 10px;
-
-    .boxItem {
-      flex: 1;
-      min-width: 0;
-      height: 64px;
+    .statistics-top {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
       align-items: center;
-      padding: 0 16px;
-      font-size: 14px;
-      color: #333;
-      border: 1px solid #eee;
-      background: #fff;
+      margin-bottom: 20px;
 
-      b {
-        font-size: 20px;
-        font-family: DINAlternate-Bold, DINAlternate,serif;
+      & > div {
+        flex: 1;
+        height: 96px;
+        line-height: 1;
+        margin-right: 20px;
+        padding: 16px 24px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+        border-radius: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        h3 {
+          font-size: 24px;
+        }
+
+        span {
+          display: block;
+          margin-bottom: 16px;
+          color: #888888;
+          font-size: 16px;
+        }
       }
     }
-  }
 
-  ::v-deep .mainPane {
-    background: #fff;
-    border: 1px solid #eee;
-    padding: 12px 16px;
-  }
-
-  .WhereaboutsConfigForm {
-    flex-wrap: wrap;
-
-    .el-select {
-      width: 100%;
-
-      ::v-deep .el-tag__close.el-icon-close {
-        background: transparent;
-      }
+    .content {
+      padding: 16px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
     }
   }
-}
 </style>