wuHanXinRui/mes/qd/src/views/wms/pf/formula/PicDialog.vue

<template>
  <el-dialog
    title="记录卡查看"
    append-to-body
    :visible.sync="dialogVisible"
    destroy-on-close
    :show-close="true"
    fullscreen
    @close="close"
    @open="open"
  >
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
<!--        <el-input v-model="query.formula_id" clearable size="mini" placeholder="物料id" disabled style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
      </div>
      <crudOperation :permission="permission">
<!--        <el-button
          slot="right"
          class="filter-item"
          type="warning"
          icon="el-icon-check"
          size="mini"
          :loading="fla"
          :disabled="crud.selections.length !== 1"
          @click="printCard"
        >
          打印
        </el-button>-->
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="文件名(点击可下载)" width="280">
        <template slot-scope="scope">
          <el-popover
            :content="'file/' + scope.row.type + '/' + scope.row.real_name"
            placement="top-start"
            title="路径"
            width="200"
            trigger="hover"
          >
            <a
              slot="reference"
              :href="baseApi + '/file/' + scope.row.type + '/' + scope.row.real_name"
              class="el-link--primary"
              style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;"
              target="_blank"
            >
              {{ scope.row.name }}
            </a>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="预览图">
        <template slot-scope="scope">
          <el-image
            :src=" baseApi + '/file/' + scope.row.type + '/' + scope.row.real_name"
            :preview-src-list="[baseApi + '/file/' + scope.row.type + '/' + scope.row.real_name]"
            fit="contain"
            lazy
            class="el-avatar"
          >
            <div slot="error">
              <i class="el-icon-document" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="suffix" label="文件类型" />
      <el-table-column prop="type" label="类别" />
      <el-table-column prop="size" label="大小" />
      <el-table-column prop="source_bill_code" label="单据编码" />
      <el-table-column prop="create_name" label="创建人" />
      <el-table-column prop="create_time" label="创建日期" width="180"/>
    </el-table>
    <!--分页组件-->
    <pagination />
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import crudFile from '@/api/tools/localStorage'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import formula from '@/api/wms/pf/formula'

export default {
  components: { pagination, crudOperation, rrOperation },
  cruds() {
    return CRUD({ title: '文件',idField: 'storage_id', url: '/api/formula/localStorage', crudMethod: { ...crudFile },
      optShow: {
        add: false,
        edit: false,
        del: true,
        download: false,
        reset: true
      },
      query:{formula_id:''}
    })
  },
  mixins: [presenter(), header(), crud()],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fla: false,
      dialogVisible: false,
      loading: false,
      permission: {
        edit: ['admin', 'storage:edit'],
        del: ['admin', 'storage:del']
      },
      formula_id: ''
    }
  },
  computed: {
    ...mapGetters([
      'baseApi',
      'fileUploadApi'
    ])
  },
  watch: {
    dialogShow: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue
      }
    }
  },
  methods: {
    open() {
      this.crud.query.formula_id = this.formula_id
      this.crud.toQuery()
    },
    /**
     * 接受父组件传值
     * @param msg
     */
    setForm(msg) {
      this.formula_id = msg
    },
    close() {
      debugger
      this.crud.resetQuery(false)
      this.$emit('update:dialogShow', false)
    },
    printCard() {
      const _selectData = this.$refs.table.selection
      const data = {
        'id': _selectData[0].storage_id
      }
      this.fla = true
      formula.print(data).then(res => {
        this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.fla = false
      }).catch(() => {
        this.fla = false
      })
    }
  }
}
</script>

<style>
.crud-opts2 {
  padding: 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts2 .el-dialog__title2 {
  line-height: 24px;
  font-size:20px;
  color:#303133;
}

.crud-opts2 .role-span {
  padding: 10px 0px 10px 0px;
}
.crud-opts2 .crud-opts-form {
  padding: 10px 0px 0px 20px;
}

.input-with-select  {
  background-color: #fff;
}
</style>