目录代码整合

packages/publicity/AppJob/AppJob.vue

@@ -0,0 +1,105 @@
+<template>
+  <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.vue'
+  import JobList from './components/JobList'
+  import Add from './components/Add'
+  import AddJob from './components/AddJob'
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'AppJob',
+    label: '招工就业',
+
+    components: {
+      JobList,
+      AddJob,
+      List,
+      Add
+    },
+
+    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 lang="scss" scoped>
+</style>

packages/publicity/AppJob/components/Add.vue

@@ -0,0 +1,204 @@
+<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: 45%">
+              <el-input size="small" placeholder="请输入" v-model="formData.title" maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+
+            <!-- 招聘人数 -->
+            <el-form-item label="招聘人数" prop="total" style="width: 45%">
+              <el-input size="small" placeholder="请输入" v-model="formData.total" show-word-limit></el-input>
+            </el-form-item>
+
+            <!-- 学历 -->
+            <el-form-item label="学历" prop="education" style="width: 45%">
+              <el-input size="small" placeholder="请输入" v-model="formData.education" show-word-limit></el-input>
+            </el-form-item>
+
+            <!-- 性别 -->
+            <el-form-item label="招聘性别" prop="gender" style="width: 45%">
+              <ai-select size="small" v-model="formData.gender" :selectList="$dict.getDict('JobGender')"></ai-select>
+            </el-form-item>
+
+            <!-- 年龄 -->
+            <el-form-item label="年龄" prop="age" style="width: 45%">
+              <el-input size="small" placeholder="请输入，如“18-60”" v-model="formData.age" show-word-limit></el-input>
+            </el-form-item>
+
+            <!-- 薪酬待遇 -->
+            <el-form-item label="薪酬待遇" prop="salary" style="width: 45%">
+              <el-input size="small" placeholder="请输入，如“5k-10k”" v-model="formData.salary" maxlength="10" show-word-limit></el-input>
+            </el-form-item>
+
+            <!-- 岗位说明 -->
+            <el-form-item label="岗位说明" prop="remark" style="width: 100%">
+              <el-input type="textarea" placeholder="请输入" maxlength="500" v-model="formData.remark" show-word-limit :rows="4"></el-input>
+            </el-form-item>
+            <!-- / -->
+          </div>
+        </ai-card>
+
+        <ai-card title="企业信息">
+          <div slot="content" class="ai-content">
+            <!-- 单位名称 -->
+            <el-form-item label="单位名称" prop="companyName" style="width: 45%">
+              <el-input size="small" placeholder="请输入" v-model="formData.companyName" maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+
+            <!-- 联系人 -->
+            <el-form-item label="联系人" prop="linkName" style="width: 45%">
+              <el-input size="small" placeholder="请输入" v-model="formData.linkName" 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',
+  // 组件
+  components: {},
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+  },
+  data() {
+    return {
+      info: {},
+      id: '',
+      formData: {
+        title: '',
+        total: '',
+        education: '',
+        gender: '',
+        age: '',
+        salary: '',
+        remark: '',
+        companyName: '',
+        linkName: '',
+        linkPhone: '',
+        status: '0',
+      },
+      formRules: {
+        title: [{ required: true, message: '请输入招聘岗位', trigger: 'change' }],
+        total: [{ required: true, message: '请输入招聘人数位', trigger: 'change' }],
+        education: [{ required: true, message: '请输入招聘学历', trigger: 'change' }],
+        age: [{ required: true, message: '请输入招聘年龄', trigger: 'change' }],
+        gender: [{ required: true, message: '请输入招聘性别', trigger: 'change' }],
+        salary: [{ required: true, message: '请输入薪酬待遇', trigger: 'change' }],
+        remark: [
+          { required: true, message: '请输入岗位说明', trigger: 'change' }
+        ],
+        companyName: [{ required: true, message: '请输入单位名称', trigger: 'change' }],
+        linkName: [{ required: true, message: '请输入联系人', trigger: 'change' }],
+        linkPhone: [{ required: true, message: '请输入联系方式', trigger: 'change' }],
+      },
+    }
+  },
+  // 计算
+  computed: {},
+  // 监听
+  watch: {},
+  created() {
+    this.dict.load('JobGender').then(() => {})
+    if (this.params && this.params.id) {
+      this.id = this.params.id
+      this.getInfoList(this.params.id)
+    }
+  },
+  // 实例创建后
+  onShow() {},
+  // 实例渲染后
+  mounted() {},
+  // 方法
+  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`, {
+              title: this.formData.title,
+              total: this.formData.total,
+              education: this.formData.education,
+              gender: this.formData.gender,
+              age: this.formData.age,
+              salary: this.formData.salary,
+              remark: this.formData.remark,
+              companyName: this.formData.companyName,
+              linkName: this.formData.linkName,
+              linkPhone: this.formData.linkPhone,
+              status: this.formData.status,
+              id: this.id,
+              type: 0
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 1000)
+              }
+            })
+        }
+      })
+    },
+
+    // 返回按钮
+    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/publicity/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="请输入联系方式" :maxlength="20" 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/publicity/AppJob/components/JobList.vue

@@ -0,0 +1,124 @@
+<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"
+            v-throttle="() => {search.current=1,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
+    },
+
+    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.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/publicity/AppJob/components/List.vue

@@ -0,0 +1,274 @@
+<template>
+  <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>
+        <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 v-throttle="() => {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>
+export default {
+  name: 'list',
+  // 组件
+  components: {},
+  props: {
+    params: Object,
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      tableData: [],
+      page: {
+        size: 10,
+        current: 1,
+        total: 0,
+      },
+      searchObj: {
+        gender: '',
+        title: '',
+      },
+      colConfigs: [
+        { type: 'selection' },
+        { prop: 'companyName', label: '单位名称', width: '180px' },
+        { prop: 'title', label: '招聘岗位', width: '150px' },
+        { prop: 'total', label: '招聘人数', width: '80px' },
+        { prop: 'education', label: '学历', width: '80px' },
+        {
+          prop: 'gender',
+          label: '性别',
+          width: '60px',
+          render: (h, { row }) => {
+            return h('span', null, this.dict.getLabel('JobGender', row.gender))
+          },
+        },
+        { prop: 'age', label: '年龄' },
+        { prop: 'salary', label: '薪酬待遇' },
+        { prop: 'linkName', label: '联系人', width: '80px' },
+        { prop: 'linkPhone', label: '联系方式' },
+        { prop: 'createUserName', label: '添加人' },
+        { prop: 'createTime', label: '添加日期', width: '160px' },
+        { slot: 'status', label: '是否启用' },
+      ],
+      staData: [],
+      ids: [],
+    }
+  },
+  // 计算
+  computed: {
+    param() {
+      let params = {}
+      //导出搜索条件
+      if (this.ids.length) {
+        params = {
+          ...params,
+          ids: this.ids,
+        }
+      } else {
+        params = {
+          ...params,
+          ...this.searchObj,
+        }
+      }
+      return params
+    },
+  },
+  // 监听
+  watch: {},
+
+  // 实例创建后
+  created() {
+    this.dict.load('JobGender').then(() => {
+      this.getList()
+      this.getStaData()
+    })
+  },
+
+  // 实例创建后
+  onShow() {},
+  // 实例渲染后
+  mounted() {
+    this.dict.load('JobGender').then(() => {
+      this.$nextTick(() => this.getList())
+    })
+  },
+  // 方法
+  methods: {
+    getList() {
+      this.instance
+        .post(`/app/appjob/list`, null, {
+          params: {
+            ...this.page,
+            ...this.searchObj,
+            type: 0
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            // console.log(res.data.records)
+            this.tableData = res.data.records
+            this.page.total = res.data.total
+          }
+        })
+        .catch(() => {})
+    },
+
+    // 添加
+    add(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id: id || '',
+        },
+      })
+    },
+
+    // 删除
+    toDelete(id) {
+      this.$confirm('删除后不可恢复，是否要删除该事项?').then(() => {
+        this.instance
+          .post('/app/appjob/delete', null, {
+            params: { ids: id || this.ids.join(',') },
+          })
+          .then((res) => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+              this.getStaData()
+            }
+          })
+      })
+    },
+
+    // 启用停用
+    onChange(row) {
+      this.instance.post(`/app/appjob/setStatus?id=${row.id}&status=${row.status}`).then((res) => {
+        if (res.code == 0) {
+          this.$message.success(+row.status ? '已启用' : '不启用')
+          this.getList()
+        }
+      })
+    },
+
+    // 统计
+    getStaData() {
+      this.instance.post('/app/appjob/statistic').then((res) => {
+        if (res?.data) {
+          this.staData = res.data
+          
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .list {
+    ::v-deep .ai-list__content {
+      padding: 0!important;
+
+      .ai-list__content--right-wrapper {
+        background: transparent!important;
+        box-shadow: none!important;
+        margin: 0!important;
+        padding: 0 0 12px!important;
+      }
+    }
+    .statistics-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      & > 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;
+        }
+      }
+    }
+
+    .content {
+      padding: 16px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+    }
+  }
+</style>