dvcp_v2_webapp/packages/wechat/AppWhereabouts/AppWhereabouts.vue

<template>
  <section class="AppWhereabouts">
    <ai-list>
      <ai-title slot="title" title="工作去向" isShowBottomBorder/>

      <template #custom>
        <el-row type="flex" class="staDataPane">
          <div class="boxItem" v-for="(op,i) in staData" :key="i">
            <div>{{ op.name }}</div>
            <b>{{ op.v1 }}</b>
          </div>
        </el-row>

        <div class="mainPane">
          <ai-search-bar>
            <template #left>
              <!--              <el-select v-model="search.village" placeholder="请选择联村" size="small"-->
              <!--                         @change="page.current=1,getTableData()" clearable>-->
              <!--                <el-option v-for="(op,i) in dict.getDict('villageCadresDirectionArea')" :key="i" :label="op.dictName"-->
              <!--                           :value="op.dictValue"/>-->
              <!--              </el-select>-->
              <ai-select placeholder="请选择工作去向" v-model="search.direction"
                         :selectList="dict.getDict('villageCadresDirectionChoice')"
                         @change="page.current=1,getTableData()"/>
            </template>
            <template #right>
              <el-input suffix-icon="iconfont iconSearch" v-model="search.name" placeholder="姓名/手机号码" clearable
                      @clear="page.current = 1,search.name = '', getTableData()"
                        v-throttle="() => {page.current = 1, getTableData()}" size="small"/>
            </template>
          </ai-search-bar>

          <ai-search-bar>
            <template #left>
              <el-button type="primary" icon="iconfont iconAdd" size="small" @click="dialog=true">添加</el-button>
              <el-button icon="iconfont iconDelete" size="small" @click="handleDelete()" :disabled="ids.length==0">删除
              </el-button>
            </template>
            <template #right>
              <ai-import :instance="instance" :dict="dict" type="appvillagecadresdirection" name="工作去向"
                         @success="getTableData()">
                <el-button icon="iconfont iconImport">导入</el-button>
              </ai-import>
              <ai-download :instance="instance" url="/app/appvillagecadresdirection/listExport" :params="params"
                           fileName="工作去向数据导出"/>
            </template>
          </ai-search-bar>

          <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total"
                    @selection-change="v=>ids=v.map(e=>e.id)"
                    :current.sync="page.current" :size.sync="page.size" @getList="getTableData">
            <el-table-column slot="options" label="操作" align="center">
              <div class="tableOptions" slot-scope="{row}">
                <el-button type="text" @click="editItem(row)">编辑</el-button>
                <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
              </div>
            </el-table-column>
          </ai-table>
        </div>
      </template>
    </ai-list>


    <ai-dialog :visible.sync="dialog" title="工作去向" @closed="form={},getTableData(),getStaData()"
               @onConfirm="submitForm" @opened="$refs.WhereaboutsConfigForm.clearValidate()">
      <el-form size="small" ref="WhereaboutsConfigForm" :model="form" :rules="rules" label-suffix="："
               label-width="100px">
        <el-row type="flex" class="WhereaboutsConfigForm" justify="space-between">
          <el-form-item v-for="(op,i) in colConfigs.slice(1,9)" :key="i" v-bind="op" style="width: 48%">

            <!--            <el-select v-if="op.prop=='village'" v-model="form[op.prop]" placeholder="请选择联村" clearable multiple>-->
            <!--              <el-option v-for="(op,i) in dict.getDict('villageCadresDirectionArea')" :key="i" :label="op.dictName"-->
            <!--                         :value="op.dictValue"/>-->
            <!--            </el-select>-->
            <ai-select v-if="op.prop=='direction'" placeholder="请选择工作去向" v-model="form[op.prop]"
                       :selectList="dict.getDict('villageCadresDirectionChoice')"/>
            <el-input v-else v-model="form[op.prop]" placeholder="请输入"/>
          </el-form-item>
        </el-row>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
export default {
  name: "AppWhereabouts",
  label: "工作去向",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    colConfigs() {
      const required = true
      return [
        {type: "selection"},
        {label: "姓名", prop: "name", align: "center", required},
        {
          label: "联村", prop: "village", align: "center", required,
          render: (h, {row}) => h('span', null, row?.village?.split(",")
          ?.map(e => this.dict.getLabel("villageCadresDirectionArea", e)).join(","))
        },
        {label: "联系片", prop: "connect", align: "center"},
        {label: "包保网络", prop: "net", align: "center"},
        {label: "手机号码", prop: "phone", align: "center", required},
        {label: "备注", prop: "remark", align: "center"},
        {
          label: "工作去向", prop: "direction", align: "center", required,
          render: (h, {row}) => h('span', null, this.dict.getLabel("villageCadresDirectionChoice", row?.direction))
        },
        {label: "排序编号", prop: "sort", align: "center"},
        {slot: "options"},
      ]
    },
    params() {
      let params = {}
      //导出搜索条件
      if (this.ids.length) {
        params = {
          ...params,
          ids: this.ids
        }
      } else {
        params = {
          ...params,
          ...this.search
        }
      }
      return params
    },
    formConfigs() {
      return this.colConfigs.slice(1, 9).map(e => ({
        ...e, comp: ['village', 'direction'].includes(e.prop) ? 'select' : 'input'
      }))
    },
    rules() {
      let rules = {}
      //调整columns要慎重
      this.formConfigs.filter(e => e.required).map(e => {
        rules[e.prop] = [
          {message: `请${e.comp == 'select' ? '选择' : '输入'}${e.label}`, required: true}
        ]
        if (e.prop == 'phone') {
          rules[e.prop]?.push({pattern: /^1[1356789][0-9]\d{8}$/, message: '手机格式有误!'})
        }
      })
      return rules
    }
  },
  data() {
    return {
      staData: [],
      search: {name: null, direction: null, village: null},
      page: {size: 10, current: 1, total: 0},
      dialog: false,
      tableData: [],
      form: {},
      ids: []
    }
  },
  methods: {
    getStaData() {
      this.instance.post("/app/appvillagecadresdirection/queryDataStatistics").then(res => {
        if (res?.data) {
          this.staData = res.data
        }
      })
    },
    getTableData() {
      this.instance.post("/app/appvillagecadresdirection/list", null, {
        params: {...this.search, ...this.page}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    submitForm() {
      this.$refs.WhereaboutsConfigForm.validate(v => {
        if (v) {
          this.instance.post("/app/appvillagecadresdirection/addOrUpdate", {
            ...this.form
          }).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.dialog = false
            }
          })
        }
      })
    },
    handleDelete(id) {
      this.$confirm("是否删除该联村镇干?").then(() => {
        this.instance.post("/app/appvillagecadresdirection/delete", null, {
          params: {ids: id || this.ids.join(",")}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
            this.getStaData()
          }
        })
      }).catch(() => 0)
    },
    editItem(row) {
      this.dialog = true
      this.form = JSON.parse(JSON.stringify({...row}))
    }
  },
  created() {
    this.dict.load("villageCadresDirectionChoice", "villageCadresDirectionArea")
    this.getStaData()
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.AppWhereabouts {
  height: 100%;

  ::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;
    }
  }

  ::v-deep .staDataPane {
    width: 100%;
    gap: 16px;
    padding-top: 16px;

    .boxItem {
      flex: 1;
      min-width: 0;
      height: 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      font-size: 14px;
      color: #333;
      border: 1px solid #eee;
      background: #fff;

      b {
        font-size: 20px;
        font-family: DINAlternate-Bold, DINAlternate, serif;
      }
    }
  }

  ::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;
      }
    }
  }
}
</style>