331_imcs_web/imcs-ui/src/views/zuihou/centralToolMagazine/lineSideEmulate/components/Edit.vue

<template>
  <el-dialog
  	:close-on-click-modal="false"
  	:close-on-press-escape="false"
  	:title="title"
  	:append-to-body="true"
  	:visible.sync="isVisible"
  	width="900px"
  	top="50px"
  >
    <el-form ref="form" :model="tenant" :rules="rules" label-position="right" label-width="130px">
    	<!-- 列表数据 -->
	    <el-table
	      :key="tableKey"
	      ref="table"
	      v-loading="loading"
	      :data="tableData.data"
	      border
	      fit
	      row-key="id"
	      style="width: 100%;"
	      @selection-change="onSelectChange"
	      @cell-click="cellClick"
	    >
	    	<!-- 序号 -->
	    	<el-table-column :label='$t("common.serialNo")' width="55px" align="center">
		      <template slot-scope="scope">
		        <div>
		          {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
		        </div>
		      </template>
	      </el-table-column>
	      <!--<el-table-column align="center" type="selection" width="50" :reserve-selection="true" />-->
	      <el-table-column prop="cuttingToolName" label='刀具名称' :show-overflow-tooltip="true"></el-table-column>
	      <el-table-column prop="specifications" label='刀具规格' width="180px"></el-table-column>
	      <el-table-column prop="cutterCode" label='刀具编码' width="180px"></el-table-column>
        <el-table-column prop="remark" label='备注' width="180px"></el-table-column>
<!--        <el-table-column prop="lockStatus" label='是否锁定'>
          <template slot-scope="{ row }">
            <el-tag :type="row.lockStatus=='1' ? 'success' : 'danger'">
              {{ row.lockStatus=='1' ? $t("common.no") : $t("common.yes") }}
            </el-tag>
          </template>
        </el-table-column>
        &lt;!&ndash; 启用状态 &ndash;&gt;
        <el-table-column prop="programId" label='启用状态'>
          <template slot-scope="{ row }">
            <el-tag :type="row.programId==null ? 'success' : 'danger'">
              {{ row.programId==null ? '可用' : '占用' }}
            </el-tag>
          </template>
        </el-table-column>-->
	    </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>

import { initQueryParams } from '@/utils/commons'
// import Pagination from "@/components/Pagination"
// 【仓库类型管理】-API
import warehouseTypeMgrApi from "@/api/modelingCenter/warehouseTypeMgr"
import customizeCuttingToolApi from "@/api/prepareProductMgr/customizeCuttingTool"
// 【边线库管理】-API
import lineSideMgrApi from "@/api/lineSideLibrary/lineSideMgr"

export default {
  name: 'TenantEdit',
  components: {
  //	Pagination
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      type: 'add',
      dialog: {
        isVisible: false,
        title: ""
      },
      tableKey: 0,
      queryParams: initQueryParams({}),
      selection: [],
      loading: false,
      tableData: {
        total: 0
      },

      tenant: this.initTenant(),
      screenWidth: 0,
      width: this.initWidth(),
      confirmDisabled: false,
      dicts:{
        NATION: {}
      },
      roles: [],
      rules: {
        name: [
        	{ required: true, message: this.$t("rules.require"), trigger: 'blur' }
        ]
      }
    }
  },
  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
  created() {
  	// 加载列表数据
  	// this.fetch()
	},
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
        this.reset()
      }
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
    initTenant () {
      return {
        id: '',
        name: '',
        status: '1',
        cutterCode:''
      }
    },
    initWidth () {
      this.screenWidth = document.body.clientWidth
      if (this.screenWidth < 991) {
        return '90%'
      } else if (this.screenWidth < 1400) {
        return '45%'
      } else {
        return '800px'
      }
    },
    setTenant (val, dicts) {
    	if(val){
    		console.log("库位产品：", val);
    		this.tenant = { ...val }
    		// 加载列表数据
  			this.getList(val);
    	}
      // 字典表
      this.dicts = dicts
    },
    close () {
      this.$emit('close')
    },
    onSelectChange (selection) {
      this.selection = selection
    },
    reset () {
      // 先清除校验，再清除表单，不然有奇怪的bug
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.tenant = this.initTenant()
    },
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirmDisabled = true
          if (this.type === 'add') {
            this.save()
          } else {
            this.update()
          }
        } else {
          return false
        }
      })
    },
    save () {
      warehouseTypeMgrApi.save(this.tenant)
        .then((response) => {
          const res = response.data
          if (res.isSuccess) {
            this.isVisible = false
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            // 通知列表
	          this.$emit("success");
	          // 通知列表-并关闭弹出框
	          this.$emit("close");
          }
        }).finally(() => {
          this.confirmDisabled = false
          return true
        })
    },
    update () {
      warehouseTypeMgrApi.update(this.tenant)
        .then((response) => {
          const res = response.data
          if (res.isSuccess) {
            this.isVisible = false
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            // 通知列表
	          this.$emit("success");
	          // 通知列表-并关闭弹出框
	          this.$emit("close");
          }
        }).finally(() => {
          this.confirmDisabled = false
          return true
        })
    },

    // 获取列表数据
    getList (row) {

	      this.loading = true
      lineSideMgrApi.getCuttingToolByCutterCode({ "id": row.toolId }).then(response => {
	        const res = response.data;
	        console.log("res123123214==== ", res);
	        if (res.isSuccess) {
	          this.tableData = res
	        }
	        // eslint-disable-next-line no-return-assign
	      }).finally(() => this.loading = false)

	    },

    fetch (params = {}) {
	      this.loading = true
	      if (this.queryParams.timeRange) {
	        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
	        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
	      }

	      this.queryParams.current = params.current ? params.current : this.queryParams.current
	      this.queryParams.size = params.size ? params.size : this.queryParams.size
	      lineSideMgrApi.page(this.queryParams).then(response => {
	        const res = response.data
	        if (res.isSuccess) {
	          this.tableData = res.data
	        }
	        // eslint-disable-next-line no-return-assign
	      }).finally(() => this.loading = false)

	    },
	    cellClick (row, column) {
	      if (column['columnKey'] === "operation") {
	        return
	      }
	      let flag = false
	      this.selection.forEach((item) => {
	        if (item.id === row.id) {
	          flag = true
	          this.$refs.table.toggleRowSelection(row)
	        }
	      })

	      if (!flag) {
	        this.$refs.table.toggleRowSelection(row, true)
	      }
	    }

  }
}
</script>
<style lang="scss" >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.checkUsed{
	display: inline-block;
	margin-left: 10px;
	color: #1890ff;
}
</style>