BST_bigScreen/src/views/BasicSettings/CustomerFiles/listdemo.vue

<template>
  <div>
    <FullPage title='客户列表'
              :list='set_list'
              @init='init'
              :loading='loading'
              @searchData='searchData'
              @changePage='changePage'
              @changeSize='changeSize'
              :tableColums='tableColums'
              :tableData='tableData'
              :page_index='page_index'
              :total='total'>
      <div slot='titleButton'>
        <Upload style="display:inline"
                name='your_file'
                :show-upload-list='false'
                :headers='headers'
                :on-error='uploadError'
                :on-success='uploadSuccess'
                :action="$store.state.ip+'/api/material_import'">
          <Button type="success"
                  ghost
                  icon='md-exit'
                  style="margin-right:10px;">导入</Button>
        </Upload>
        <Button @click="handleSet({},-1,1)"
                type='primary'
                style="margin-right:10px;">新增</Button>
      </div>
      <template slot='set'
                slot-scope='{row,index}'>
        <div class="table-set">
          <a style="margin:0 5px"
             @click="handleSet(row,index,2)">编辑</a>
          <a style="margin:0 5px"
             @click="handleSet(row,index,3)">查看</a>
          <a style="margin:0 5px"
             @click="handleSet(row,index,4)">删除</a>
        </div>
      </template>
    </FullPage>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'AdditionalProjectIndex',
  components: {

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      loading: false,
      tableData: [],
      page_index: 1,
      total: 0,
      page_size: 10,
      headers: { 'Authorization': localStorage.getItem('token') },
      proxyObj: {},
      tableColums: [
        { title: '序号', type: 'index', key: '', align: 'center', width: 80 },
        { title: '客户编码', key: 'code', align: 'center', tooltip: true, minWidth: 140 },
        { title: '客户名称', key: 'title', align: 'center', tooltip: true, minWidth: 140 },
        { title: '折扣率', key: 'fax', align: 'center', tooltip: true, minWidth: 140 },
        {
          title: '专营业务员', key: 'service_id', align: 'center', tooltip: true, minWidth: 140,
          render: (h, params) => {
            const { row } = params
            let text
            this.userList.forEach(element => {
              (element.id == row.service_id) && (text = element.nickname)
            });
            return h('span', {}, text)
          }
        },
        {
          title: '超标方案', key: 'plan_title', align: 'center', tooltip: true, minWidth: 140,
          // render: (h, params) => {
          //   const { row } = params
          //   let text
          //   this.overStandardList.forEach(element => {
          //     (element.id == row.overdraft_plan_id) && (text = element.title)
          //   });
          //   return h('span', {}, text)
          // }
        },
        // {
        //   title: '是否启用', key: 'lock', align: 'center', tooltip: true, minWidth: 140,
        //   render: (h, params) => {
        //     return h('span', {}, params.row.lock ? '是' : '否')
        //   }
        // },
        {
          title: '创建时间', key: 'crt_time', align: 'center', tooltip: true, minWidth: 140,
          render: (h, params) => {
            return h('span', {}, this.func.replaceDate(params.row.crt_time))
          }
        },
        { title: '操作', key: '', align: 'center', slot: 'set', width: 200 },
      ],
      tableData: [],
      type: null,
      userList: [],
      overStandardList: []
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // 获取用户列表
    this.axios({ method: 'get', url: '/api/user', }).then((res) => { this.userList = res.data.data }).catch((err) => { });
    // 获取超标方案
    this.axios({ method: 'get', url: '/api/overdraft_list', }).then((res) => { this.overStandardList = res.data.data }).catch((err) => { });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  methods: {
    init (row) {
      this.proxyObj = row
      this.axios.get('/api/custom_list', {
        params: {
          page_index: this.page_index,
          page_size: this.page_size,
          ...row
        }
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.total = res.data.total
          this.tableData = res.data.data
        }
      }).catch(err => { console.error(err); })
    },
    searchData () {
      this.page_index = 1;
      this.init(this.proxyObj)
    },
    handleSet (row, index, type) {
      this.type = type
      // 1新增 2编辑 3查看 4删除
      switch (type) {
        case 1:
        case 2:
        case 3:
          this.$router.push({
            path: '/cms/BasicSettings/CustomerFiles/detail',
            query: {
              type,
              id: row.id,
            }
          })
          break;
        case 4:
          this.$Modal.confirm({
            title: '确认删除？',
            content: '此操作无法恢复，请确认！',
            onOk: () => {
              this.axios({
                method: 'post',
                url: '/api/custom_del',
                data: {
                  id: row.id
                }
              }).then((res) => {
                this.$Message.success(res.msg)
                this.init(this.proxyObj)
              }).catch((err) => { });
            },
            onCancel: () => { }
          })
          break;
        default:
          break;
      }
    },
    changePage (e) {
      this.page_index = e;
      this.init(this.proxyObj)
    },
    changeSize (e) {
      this.page_size = e;
      this.init(this.proxyObj)
    },
    uploadSuccess (res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || '上传成功')
      } else {
        this.$Message.warning(res.msg || '上传失败')
      }
      this.getData(this.proxyObj)
    },
    uploadError (err) {
      this.$Message.error(err.msg || '上传失败')
    },
    async exportData () {
      const res = await this.axios('/api/parts_classify_export', { params: { ...this.proxyObj } })
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
        location.href = url
      }
    },
  },
  // 监听属性 类似于data概念
  computed: {
    set_list () {
      return [
        { title: '客户编码', name: 'Input', value: '', serverName: 'code', placeholder: '请输入客户编码' },
        { title: '客户名称', name: 'Input', value: '', serverName: 'title', placeholder: '请输入客户名称' },
        { title: '专营业务员', name: 'Select', value: '', placeholder: '请选择专营业务员', serverName: 'service_id', optionValue: 'id', optionName: 'nickname', option: this.userList },
        { title: '超标方案', name: 'Select', value: '', placeholder: '请选择超标方案', serverName: 'plan_id', optionValue: 'id', optionName: 'title', option: this.overStandardList },
        // { title: '是否启用', name: 'Select', value: '', placeholder: '请选择是否启用', serverName: 'lock', option: [{ label: '是', vlaue: 1 }, { label: '否', value: 0 }] },
        { title: '创建时间', start_server: 'start_time', end_server: 'end_time', start_value: '', end_value: '', isDate: true, start_placeholder: '开始日期', end_placeholder: '结束日期' },
      ]
    }
  },
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
</style>