laws_weilai/jero-web/src/components/AssignedBy/index.vue

<template>
  <div class='diolag-area'>
    <a-spin :spinning='spinLoading'>
      <a-form-model
        class='tag-module'
        ref='ruleForm'
        :model='form'
        :rules='rules'
        :label-col='labelCol'
        :wrapper-col='wrapperCol'
      >
        <a-row :gutter='24'>
          <a-col :span='9'>
            <a-form-model-item ref='paramsTemplateName' :label="$t('fullName')" prop='paramsTemplateName'>
              <a-input
                v-model='form.realname' />
            </a-form-model-item>
          </a-col>
          <a-col :span='9'>
            <a-form-model-item ref='paramsTemplateName' :label="$t('accountNumber')" prop='paramsTemplateName'>
              <a-input
                v-model='form.username' />
            </a-form-model-item>
          </a-col>
          <a-col :span='6' style='margin-top: 5px;'>
            <a-button class='box-button' type='primary' @click='searchQuery'>{{ $t('query') }}</a-button>
            <a-button class='box-button' style='margin-left: 8px' @click='searchReset'>{{ $t('reset') }}</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <a-table
      class='table-area'
      ref='table'
      size='middle'
      rowKey='id'
      :columns='columns'
      :dataSource='areaTable'
      :pagination='false'
      :loading='loading'
      :scroll='{x: 600}'
      :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
      @change='handleTableChange'>
    </a-table>
    <div class="page">
      <a-pagination
        :show-total="total => $t('total')+` ${total} `+$t('strip')"
        show-quick-jumper
        show-size-changer
        :page-size.sync="pageSize"
        :total="total"
        @change="pageOnChange"
        @showSizeChange="SizeChange"
      />
    </div>
    <div class='drawer-bootom-button'>
      <a-button style='margin-right: .8rem' @click='handleCancel'>{{ $t('cancel') }}</a-button>
      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>{{ $t('submit') }}</a-button>
    </div>
  </div>
</template>

<script>
import { putAction, postAction, getAction, deleteAction } from '@/api/manage'
import axios from 'axios'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  name: 'diolagArea',
  components: {},
  data() {
    return {
      token:Vue.ls.get(ACCESS_TOKEN),
      title: this.$t('add'),
      total: 0,
      selectedRowKeysDate: {},
      loading: false,
      editId: '',
      columns: [
        {
          title: this.$t('fullName'),
          dataIndex: 'realname',
          key: 'showArea',
          align: 'center',
          ellipsis: true
        },
        {
          title: this.$t('accountNumber'),
          align: 'center',
          dataIndex: 'username',
          ellipsis: true
        }
      ],
      newVisible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      form: {},
      rules: {},
      areaTable: [],
      flag: false,  //表单提交标识
      spinLoading: false,
      confirmLoading: false,
      selectedRowKeys: [],
      pageNo: 1,
      pageSize: 10
    }
  },
  props: {
    selectedRowKeysArray: {
      type: String,
      default: '',
      require: true
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    pageOnChange(page, pageSize) {
      this.pageNo = page
      this.loadData()
    },
    SizeChange(page, pageSize) {
      this.pageNo = 1
      this.pageSize = pageSize
      this.loadData()
    },
    loadData() {
      this.loading = true
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.form
      }
      if(this.form.username !== undefined) {
        params.username = `*${this.form.username}*`
      }
      if(this.form.realname !== undefined) {
        params.realname = `*${this.form.realname}*`
      }
      getAction(`sys/user/page`, params).then(res => {
        if (res.success) {
          this.areaTable = [...res.result.records]
          this.total = res.result.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    searchQuery() {
      this.loadData()
    },
    searchReset() {
      this.form = {}
      this.loadData()
    },
    handleCancel() {
      this.$emit('areaVisible', false)
    },
    onSelectChange(selectedRowKeys, selectedRowKeysDate) {
      this.selectedRowKeysDate = selectedRowKeysDate
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange(val) {
    },
    //新增
    handleSubmit() {
      let _this = this
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning(this.$t('pleaseSelectData'))
      } else if (this.selectedRowKeys.length > 1) {
        this.$message.warning(this.$t('OnlyOneSelected'))
      } else {
        let param = {ids: this.selectedRowKeysArray, projectId: this.$route.query.id, dre:this.selectedRowKeysDate[0].username }
        axios({
          url: '/jero-boot/params/collectManifest/updateDreBatch',
          method: 'post',
          data: param,
          transformRequest: [function (data) {
            let ret = ''
            for (let it in data) {
              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
          }],
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-Access-Token':_this.token
          }
        })
          .then( (res) =>{
            if (res.data.success) {
              _this.$message.success(res.data.result)
              // 填写人
              // 获取当前登陆人
              this.$emit('GetgetLoginUserType')
              this.$emit('GetgetTableList')
              this.$emit('areaVisibleAssignedbyflag', false)
            }else{
              _this.$message.warning(res.data.result)
            }
          })
          .catch( (error) =>{
            console.log(error);
          });
      }
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/less/common.less';

.diolag-area {
  .table-area {
    margin: 20px 0;

    .action-edit {
      margin-right: 10px;
    }
  }

  .table-del {
    color: red;
  }
}
.drawer-bootom-button{
  display: flex;
  justify-content: center;
}
</style>
<style lang='less'>
.area-module {
  .ant-modal-wrap {
    .ant-modal {
      .ant-modal-content {
        .ant-modal-footer {
          text-align: center;
        }
      }
    }
  }
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>