jf-frock/src/views/ProcessRequire/index.vue

<template>
  <div>
    <FullPage title='工艺要求'
              :list='list'
              @init='init'
              :loading='loading'
              @searchData='init'
              @changePage='changePage'
              @changeSize='changeSize'
              :tableColums='tableColums'
              :tableData='tableData'
              :pageIndex='pageIndex'
              :total='total'>
      <div slot='titleButton'
           style="display:flex;">
        <Upload name='your_file'
                :show-upload-list='false'
                :headers='headers'
                :on-error='uploadError'
                :on-success='uploadSuccess'
                :action="$store.state.ip+'/api/process_route_index_import'">
          <Button type="success"
                  ghost
                  icon='md-exit'
                  style="margin-right:10px;">批量导入</Button>
        </Upload>
        <Button @click="exportData"
                type="warning"
                ghost
                icon='md-return-left'
                style="margin-right:10px;">批量导出</Button>
        <Button @click="handleAddProcessRequire"
                type="primary"
                ghost
                icon='md-add'>新增工艺要求</Button>
      </div>
      <div slot='navButton'>
      </div>

      <template slot='set'
                slot-scope='{row,index}'>
        <div>
          <a style="margin:0 5px"
             @click="handleSet(row,index,1)">编辑</a>
          <a style="margin:0 5px;color:red"
             @click="handleSet(row,index,2)">删除</a>
        </div>
      </template>
      <Modal class-name="vertical-center-modal"
             :title="addPRInfo.PRId==''?'新增工艺要求':'编辑工艺要求'"
             v-model='showModal'
             :width="400">
        <div class="modal_div">
          <span>ID :</span> <Input v-model="addPRInfo.PRId"
                 disabled
                 placeholder="自动生成"
                 style="width:200px" />
        </div>
        <div class="modal_div">
          <span>工艺要求 :</span> <Input v-model="addPRInfo.PRName"
                 placeholder="请输入工艺要求"
                 style="width:200px" />
        </div>
        <div class="modal-footer"
             slot="footer">
          <Button @click="showModal=false">取消</Button>
          <Button type="primary"
                  @click="handlePRAddConfirm()">确认</Button>
        </div>
      </Modal>
    </FullPage>
  </div>
</template>

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

export default {
  name: 'ProcessRequire',
  data () {
    // 这里存放数据
    return {
      list: [
        { title: '工艺要求', name: 'Input', value: '', serverName: 'title', placeholder: '请输入工艺要求' },
      ],
      tableColums: [
        { title: '序号', type: 'index', align: 'center', key: 'id', resizable:true,width: 200 },
        { title: '工艺要求', align: 'center', key: 'title', resizable:true,width: 1000  },
        { title: '操作', align: 'center', key: 'set', slot: 'set', fixed: 'right', minWidth: 80, fixed: 'right' },
      ],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      proxyObj: {},
      loading: false,
      headers: { 'Authorization': localStorage.getItem('token') },
      addPRInfo: {
        PRId: '',
        PRName: '',
      },
      showModal: false,
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  methods: {
    init (row) {
      this.pageIndex = 1;
      row.page_index = this.pageIndex
      row.page_size = this.pageSize;
      this.proxyObj = row
      this.getData(row)
    },
    getData (row) {
      this.loading = true;
      this.axios('/api/technological_requirement', { params: row }).then(res => {
        this.loading = false;
        // res.data.top.map(((v, i) => {
        //   if (v.key == '颜色') { v.hover = 1 }
        //   if (i == 0) {
        //     v.fixed = 'left'
        //     v.width = '100'
        //   } else {
        //     if (i == res.data.top.length - 1) {
        //       v.fixed = 'right'
        //       v.width = '150'
        //     } else {
        //       v.minWidth = 150
        //     }
        //   }

        //   if (v.hover == 1) {
        //     v.render = function (h, params) {
        //       const { row } = params
        //       return h('Tooltip', {
        //         props: {
        //           content: row[v.key],
        //           placement: "top"
        //         },
        //       }, [
        //         h('div', {
        //           props: {},
        //           style: {
        //             width: '100px',
        //             overflow: 'hidden',
        //             whiteSpace: 'nowrap',
        //             textOverflow: 'ellipsis'
        //           }
        //         }, row[v.key])
        //       ])
        //     }
        //   }


        // }))
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
    },
    changePage (e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      this.getData(this.proxyObj)
    },
    changeSize (e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj)
    },
    handleAddProcessRequire () {
      this.addPRInfo.PRId = ''
      this.addPRInfo.PRName = ''
      this.showModal = true
    },
    //1修改 2删除
    handleSet (row, index, type) {
      if (type == 1) {
        this.addPRInfo.PRId = row.id
        this.addPRInfo.PRName = row.title
        this.showModal = true
      } else if (type == 2) {
        //删除
        this.$Modal.confirm({
          title: '确认删除？',
          content: '此操作确认后不可恢复，请确认！',
          onOk: () => {
            this.axios({
              method: 'post',
              url: '/api/technological_requirement_del',
              data: {
                id: row.id
              }
            }).then((res) => {
              this.$Message.success(res.msg)
              this.getData(this.proxyObj)
            }).catch((err) => {
            });
          },
          onCancel: () => this.showModal = false
        })
      }
    },
    //新增
    handlePRAddConfirm () {
      let temp = {
        id: this.addPRInfo.PRId,
        title: this.addPRInfo.PRName
      }
      this.axios({
        method: 'post',
        url: '/api/technological_requirement_edit',
        data: temp
      }).then((res) => {
        this.$Message.success(res.msg)
        this.getData(this.proxyObj)
        this.showModal = false
      }).catch((err) => {
      });
    },
    async exportData () {
      const res = await this.axios('/api/process_require_export', { params: { ...this.proxyObj, page: 0 } })
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
        location.href = url
      }
    },
    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 || '上传失败')
    }
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState(['persimissionData']),

  },
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.modal_div {
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
}
</style>