patrol-wzgl-web/src/views/storages/floodmaterialfile.vue

<template>
  <div>

    <div ref="lxHeader">
      <lx-header icon="md-apps" text="防汛物资管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="关键词搜索" />
            <!-- <el-select v-model="select.guanliancangku" @change="changeCk" style="width: 200px;" placeholder="请选择仓库">
              <el-option v-for="item in cangkuList" :key="item.id" :label="item.cangkumingcheng"
                :value="item.cangkumingcheng">
              </el-option>
            </el-select> -->
            <Select v-model="select.guanliancangku" style="width:200px;margin-right: 10px;">
              <Option v-for="item in cangkuList" :value="item.id" :key="item.value">{{ item.cangkumingcheng }}</Option>
            </Select>
            <Button type="primary" @click="getindex">查询</Button>
            <Button type="primary" style="margin-left: 10px;"
              @click="$refs['addMater'].isShow = true,$refs['addMater'].type = 'add',$refs['addMater'].setCkList(cangkuList)">添加</Button>
            <Button type="primary" style="margin-left: 10px;"
              @click="$refs['imports'].show()">导入</Button>
            <!-- <Button type="primary" style="margin-left: 10px;"
                @click="exportExcel(new Date().getTime().toString())">导出</Button> -->
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :total="total" v-loading="loading" @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange" :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="180" header-align="center">
          <template slot-scope="scope">
            <div>
              <Button type="primary" size="small" style="margin-left: 10px;"
                @click="editorMater(scope.row.id,'editor')">编辑</Button>
              <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteMater(scope.row)">
                <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
              </Poptip>
            </div>

          </template>
        </el-table-column>
      </template>

    </xy-table>
    <addMater ref="addMater" @refresh="getindex"></addMater>

    <imports :table-name="customForm.tableName" :form-info="importForm" ref="imports" @refresh="getindex"></imports>

  </div>
</template>

<script>
  import {
    index,
    destroy,
  } from "@/api/system/baseForm.js"
  import addMater from "./components/addMater.vue"
  import {
    Message
  } from 'element-ui'
  import imports from "@/views/component/imports.vue"
  export default {
    components: {
      addMater,
      imports
    },
    data() {
      return {
        loading: false,
        select: {
          pageSize: 10,
          pageIndex: 1,
          keyword: "",
          guanliancangku:''
        },
        customForm: {
          tableName: "flood_materials"
        },
        form: [],
        importForm: [],
        total: 0,
        list: [],
        cangkuList: [],
        table: [{
            label: '序号',
            type: 'index',
            fixed: 'left',
            width: 80
          },
          // {
          //   label: "关联仓库",
          //   width: 120,
          //   prop: 'guanliancangku',
          //   align: 'center',
          // },
          {
            label: "仓库名称",
            width: 220,
            prop: 'cangkumingcheng',
            align: 'left',
          },
          {
            label: "物资代码",
            width: 120,
            prop: 'wuzidaima',
            align: 'left'
          },
          {
            label: "现物资名称",
            width: 120,
            prop: 'xianwuzimingcheng',
            align: 'center'
          },
          {
            label: "原物资名称",
            width: 120,
            prop: 'yuanwuzimingcheng',
            align: 'left'
          },
          {
            label: "规格型号",
            width: 120,
            prop: 'guigexinghao',
            align: 'center'
          },
          {
            label: "数量",
            width: 80,
            prop: 'shuliang',
            align: 'center'
          },
          {
            label: "单位",
            width: 80,
            prop: 'danwei',
            align: 'center'
          },
          {
            label: "价值（元）",
            width: 80,
            prop: 'jiazhiyuan',
            align: 'center'
          },
          {
            label: "生产日期",
            width: 120,
            prop: 'shengchanriqi',
            align: 'center'
          },
          {
            label: "入库日期",
            width: 120,
            prop: 'rukuriqi',
            align: 'center'
          },
          {
            label: "储备年限",
            width: 80,
            prop: 'chubeinianxian',
            align: 'center'
          },
          {
            label: "状态",
            width: 80,
            prop: 'zhuangtai',
            align: 'center'
          },
          {
            label: "资金来源",
            width: 120,
            prop: 'zijinlaiyuan',
            align: 'center'
          },
          {
            label: "储备方式",
            width: 120,
            prop: 'chubeifangshi',
            align: 'center'
          },
          {
            label: "储备地点",
            width: 180,
            prop: 'chubeididian',
            align: 'left'
          },
          {
            label: "备注",
            width: 180,
            prop: 'beizhu',
            align: 'left'
          },
          {
            label: "储备层级",
            width: 120,
            prop: 'chubeicengji',
            align: 'left'
          },
          {
            label: "是否展示",
            width: 120,
            prop: 'shifouzhanshi',
            align: 'left'
          }
        ]
      }
    },
    mounted() {
      this.getCangku()
      this.getindex()
      this.table.map(item => {
        this.importForm.push({
          field: item.prop,
          name: item.label
        })
      })
      console.log("importForm", this.importForm)
    },
    methods: {
      async getCangku() {
        let res = await index({
          page_size: 999,
          page: 1,
          table_name: 'flood_storages',
        })
        this.cangkuList = res.data
      },
      async getindex() {
        this.loading = true
        const res = await index({
          page_size: this.select.pageSize,
          page: this.select.pageIndex,
          table_name: this.customForm.tableName,
          filter: [{
            "key": "xianwuzimingcheng",
            "op": "like",
            "value": this.select.keyword
          },{
            "key": "guanliancangku",
            "op": "eq",
            "value": this.select.guanliancangku
          }],
        })
        this.list = res.data
        this.total = res.total
        this.loading = false
      },

      pageChange(e) {
        this.select.pageIndex = e
        this.getindex()
      },
      editorMater(id, type) {
        this.$refs['addMater'].id = id
        this.$refs['addMater'].type = type
        this.$refs['addMater'].setCkList(this.cangkuList)
        this.$refs['addMater'].isShow = true
      },
      deleteMater(row) {
        destroy({
          id: row.id,
          table_name: this.customForm.tableName
        }).then(res => {
          Message({
            type: 'success',
            message: '删除成功'
          })
          this.getindex()
        })
      },

    },

  }
</script>

<style scoped>
  /deep/ .draw {
    padding-left: 20px;
  }

  /deep/ .draw>div {
    font-size: 20px;
    margin: 15px 0
  }

  /deep/ .el-timeline-item {
    list-style: none;
  }
</style>