BST_bigScreen/src/views/BasicSettings/AdditionalProject/index.vue

<template>
  <div>
    <FullPage title='附加项目档案列表'
              :list='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/parts_classify'">
          <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="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>
    <Modal v-model="showModal"
           :title="type==1?'新增附加项目':type==2?'编辑附加项目':'查看附加项目'"
           @on-ok="handleFormConfirm"
           @on-cancel="showModal = false">
      <Form ref="editForm"
            :label-width="150"
            :model="editForm">
        <FormItem label='ID:'>
          <Input type="text"
                 style="width:250px"
                 readonly
                 v-model="editForm.id"
                 placeholder="自动生成">
          </Input>
        </FormItem>
        <FormItem label="附加项目名称:">
          <Input type="text"
                 style="width:250px"
                 v-model="editForm.title"
                 placeholder="请输入附加项目名称">
          </Input>
        </FormItem>
        <FormItem label="数量:">
          <Input type="text"
                 style="width:250px"
                 v-model="editForm.num"
                 placeholder="请输入数量">
          </Input>
        </FormItem>
        <FormItem label="单价:">
          <Input type="text"
                 style="width:250px"
                 v-model="editForm.price"
                 placeholder="请输入单价">
          </Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

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

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

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      list: [
        { title: '附加项目名称', name: 'Input', value: '', serverName: 'title', placeholder: '请输入附加项目名称' },
      ],
      loading: false,
      headers: { 'Authorization': localStorage.getItem('token') },
      tableData: [],
      page_index: 1,
      total: 0,
      page_size: 10,
      proxyObj: {},
      tableColums: [
        { title: '序号', type: 'index', key: '', align: 'center', width: 80 },
        { title: '附加项目名称', key: 'title', align: 'center', tooltip: true, minWidth: 140 },
        { title: '数量', key: 'num', align: 'center', tooltip: true, minWidth: 140 },
        { title: '单价', key: 'price', align: 'center', tooltip: true, minWidth: 140 },
        { title: '操作', key: '', align: 'center', slot: 'set', width: 200 },
      ],
      tableData: [],
      type: null,
      showModal: false,
      editForm: {},
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

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

  },
  methods: {
    init (row) {
      this.proxyObj = row
      this.axios.get('/api/project_ext_list', {
        params: {
          page_index: this.page_index,
          page_size: this.page_size,
          ...row
        }
      }).then(res => {
        if (res.code == 200) {
          this.total = res.data.total
          this.tableData = res.data.data
        }
      }).catch(err => { console.error(err); })
    },
    searchData (row) {
      this.page_index = 1;
      this.init(row)
    },
    handleFormConfirm () {
      this.axios({
        method: 'post',
        url: '/api/project_ext_edit',
        data: {
          ...this.editForm
        }
      }).then((res) => {
        this.$Message.success(res.msg)
        this.init(this.proxyObj)
        this.editForm = { id: null, title: null, num: null, price: null }
      }).catch((err) => { });
    },
    handleSet (row, index, type) {
      this.type = type
      this.editForm = JSON.parse(JSON.stringify(row))
      // 1新增 2编辑 3查看 4删除
      switch (type) {
        case 1:
        case 2:
          this.showModal = true
          break;
        case 3:
          break;
        case 4:
          this.$Modal.confirm({
            title: '确认删除？',
            content: '此操作无法恢复，请确认！',
            onOk: () => {
              this.axios({
                method: 'post',
                url: '/api/project_ext_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/project_ext_export')
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
        location.href = url
      }
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

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