BST_bigScreen/src/views/BasicSettings/SuppliersManage/SippliersStockPriceList.vue

<template>
  <div class="SippliersStockPriceList">
    <Toptitle title="供应商存货价格表">
      <slot name="titleButton">
      </slot>
    </Toptitle>
    <div class="content">
      <div class="content_top">
        <div class="content_top_form">
          <Form :label-width="120"
                :model="searchData">
            <FormItem label="供应商分类编码:">
              <Input type="text"
                     size="small"
                     v-model="searchData.type_code"
                     style="width: 150px"
                     placeholder="供应商分类编码" />
            </FormItem>
            <FormItem label="供应商分类名称:">
              <Input type="text"
                     size="small"
                     v-model="searchData.type_title"
                     style="width: 150px"
                     placeholder="供应商分类名称" />
            </FormItem>
            <FormItem label="供应商编码:">
              <Input type="text"
                     size="small"
                     v-model="searchData.code"
                     style="width: 150px"
                     placeholder="供应商编码" />
            </FormItem>
            <FormItem label="供应商名称:">
              <Input type="text"
                     size="small"
                     v-model="searchData.title"
                     style="width: 150px"
                     placeholder="供应商名称" />
            </FormItem>
            <FormItem label="审核状态:">
              <Select v-model="searchData.state"
                      size="small"
                      clearable
                      style="width: 150px">
                <Option label='已审核'
                        :value=1 />
                <Option label='未审核'
                        :value=0 />
              </Select>
            </FormItem>
          </Form>
          <div class="content_top_btn">
            <Button type="primary"
            @click="initData"
                    size="small">搜索</Button>
          </div>
        </div>
      </div>
      <div class="content_body">
        <div class="content_body_btn">
          <Button type="primary"
                  style="margin-right:10px;">导入</Button>
           <Button @click="exportData()" type="primary" style="margin-right: 10px">导出</Button>
          <Button type="primary"
                  @click="handleSet(1,'')">新增</Button>
        </div>
        <Table :columns="tableColumns"
               border
               :data="tableData">
          <template slot="setSlot"
                    slot-scope="{row,index}">
            <a style="margin:0 5px;color:orange"
               @click="handleSet(2,row,index)">{{row.state==0?"审核":"弃审"}}</a>
            <a style="margin:0 5px"
               @click="handleSet(3,row,index)">查看</a>
            <a style="margin:0 5px"
               :disabled="row.state==1"
               @click="handleSet(4,row,index)">编辑</a>
            <a style="margin:0 5px;color:#00FF00"
               :disabled="row.state==0"
               @click="handleSet(5,row,index)">变更</a>
            <a style="margin:0 5px;color:#FFBB00	"
               @click="handleSet(6,row,index)">变更记录</a>
            <a style="margin:0 5px;color:red"
               @click="handleSet(7,row,index)">删除</a>
          </template>
        </Table>
        <div class="content_body_page">
          <Page :page-size-opts="[10, 20, 30, 40,100]"
                @on-page-size-change='changeSize'
                @on-change='changePage'
                :current='pageIndex'
                show-total
                show-elevator
                :total="total"
                show-sizer
                :page-size='pageSize' />
        </div>
      </div>
    </div>
  </div>
</template>

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

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

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      searchData: {
        type_code:'',
        code: '',
        title: '',
        state: '',
        type_title:'',
      },
      tableColumns: [
        { title: '供应商分类编码', key: 'type_code', align: 'center', minWidth: 140 },
        { title: '供应商分类名称', key: 'type_title', align: 'center', minWidth: 140 },
        { title: '供应商编码', key: 'code', align: 'center', minWidth: 120 },
        { title: '供应商名称', key: 'title', align: 'center', minWidth: 120 },
        { title: '审核人', key: 'nickname', align: 'center', minWidth: 120 },
        {
          title: '审核状态', key: 'state', align: 'center', minWidth: 120,
          render: (h, params) => {
            const { row } = params
            return h('span', {}, row.state == 0 ? '未审核' : '已审核')
          }
        },
        { title: '操作', key: 'code', align: 'center', minWidth: 250, slot: 'setSlot' },
      ],
      tableData: [{}],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      this.axios({
        method: 'get',
        url: '/api/supply_material_list',
        params: {
          ...this.searchData
        }
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data
        this.total = res.data.total
      }).catch((err) => { });
    },
    // 1新增 2审核 3查看 4编辑 5变更 6变更记录 7删除
    handleSet (type, row, index) {
      switch (type) {
        case 1:
          this.handleGoPage(type, '')
          break;
        case 2:
          this.$Modal.confirm({
            title: row.state == 0 ?'确认审核？':'确认弃审？',
            content: row.state == 0 ?'此操作将审核订单，请确认！':'此操作将弃审订单，请确认！',
            onOk: () => {
              this.axios({
                method: 'post',
                url: '/api/supply_material_pull',
                data: {
                  supply_id: row.supply_id,
                  state: row.state == 0 ? 1 : 0
                }
              }).then((res) => {
                this.$Message.success(res.msg)
                this.initData()
              }).catch((err) => { });
            },
            onCancel: () => { }
          })
          break;
        case 3:
        case 4:
        case 5:
          this.handleGoPage(type, row.supply_id,row.state)
          break;
        case 6:
          break;
        case 7:
          this.$Modal.confirm({
            title: '确认删除？',
            content: '此操作无法恢复，请确认！',
            onOk: () => {
              this.axios({
                method: 'get',
                url: '/api/supply_material_del',
                params: {
                  supply_id: row.supply_id
                }
              }).then((res) => {
                this.$Message.success(res.msg)
                this.initData()
              }).catch((err) => { });
            },
            onCancel: () => { }
          })
          break;
      }
    },
    handleGoPage (type, supply_id,state) {
      this.$router.push({
        path: '/cms/BasicSettings/SuppliersManage/SippliersStockPriceListEdit',
        query: {
          type,
          supply_id,
          state,
        }
      })
    },
    changeSize (e) {
      this.pageSize = e;
      this.initData()
    },
    changePage (e) {
      this.pageIndex = e;
      this.initData()
    },
     async exportData(){
            const res = await this.axios('/api/supply_material_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>
.content {
  .content_top {
    border-bottom: 1px solid #e8eaec;
    .content_top_form {
      margin-top: 20px;
      /deep/.ivu-form {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      /deep/.ivu-form-item {
        display: inline-block;
        width: 280px;
      }
    }
    .content_top_btn {
      display: flex;
      justify-content: flex-end;
      padding-bottom: 10px;
    }
  }
  .content_body {
    margin-top: 20px;
    .content_body_btn {
      display: flex;
      justify-content: flex-end;
      padding: 10px 0;
    }
    .content_body_page {
      display: flex;
      justify-content: center;
      padding-top: 20px;
    }
  }
}
</style>