|
|
@@ -0,0 +1,356 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :title="title"
|
|
|
+ :append-to-body="true"
|
|
|
+ :visible.sync="isVisible"
|
|
|
+ :width="width"
|
|
|
+ top="50px"
|
|
|
+ >
|
|
|
+ <el-form ref="form" :model="tenant" :disabled="formDisabled" :rules="rules" label-position="right" label-width="130px">
|
|
|
+ <el-form-item :label='$t("resource.form.target_resource")+"："' prop="no">
|
|
|
+ <el-input v-model="tenant.no" readonly="readonly" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label='$t("resource.form.pgUpload")+"："' prop="filePath">
|
|
|
+ <el-input v-model="tenant.filePath" :readOnly="true" :placeholder='$t("common.pleaseEnter")'/>
|
|
|
+ <el-upload
|
|
|
+ accept=".txt"
|
|
|
+ class="upload-demo"
|
|
|
+ :headers="headers"
|
|
|
+ :action="action"
|
|
|
+ :data="fileOtherData"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-error='handleError'
|
|
|
+ :on-progress="handlePropress"
|
|
|
+ multiple
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :file-list="fileList">
|
|
|
+ <el-button size="small" type="primary">{{$t("common.upload")}}</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">{{$t("resource.tips.fileTips")}}</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
|
+ <el-button plain type="primary" :disabled="confirmDisabled" @click="submitForm">{{ $t('common.confirm') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ // 【程序中心】-API
|
|
|
+ import programCenterApi from "@/api/resourceProductMgr/programCenter"
|
|
|
+ // 【设备（生产资源）】-API
|
|
|
+ import productionResourcesMgrApi from "@/api/resourceProductMgr/productionResourcesMgr"
|
|
|
+ import db from "@/utils/localstorage";
|
|
|
+ import {Base64} from 'js-base64';
|
|
|
+ export default {
|
|
|
+ name: 'TenantEdit',
|
|
|
+ props: {
|
|
|
+ dialogVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ formDisabled: false,
|
|
|
+ tableData: [],
|
|
|
+ eqList: [], // 设备下拉类别数据
|
|
|
+ toolList: [], // 刀具列表
|
|
|
+ pgContent: '', // 程序内容
|
|
|
+ type: 'add',
|
|
|
+ tenant: this.initTenant(),
|
|
|
+ screenWidth: 0,
|
|
|
+ width: this.initWidth(),
|
|
|
+ confirmDisabled: false,
|
|
|
+ dicts:{
|
|
|
+ NATION: {}
|
|
|
+ },
|
|
|
+ // 附件上传
|
|
|
+ action: `${process.env.VUE_APP_BASE_API}/file/attachment/upload`,
|
|
|
+ // 附件其它参数
|
|
|
+ fileOtherData: {
|
|
|
+ bizId: "",
|
|
|
+ bizType: "PROGRAM"
|
|
|
+ },
|
|
|
+ // 附件的值
|
|
|
+ fileList: [/*
|
|
|
+ {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
|
|
|
+ {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
|
|
|
+ */],
|
|
|
+ roles: [],
|
|
|
+ rules: {
|
|
|
+ filePath: [
|
|
|
+ { required: true, message: this.$t("rules.require"), trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ version: [
|
|
|
+ { required: true, message: this.$t("rules.require"), trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
|
|
|
+ created() {
|
|
|
+ // 加载【设备】列表数据
|
|
|
+ this.equmentList()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ headers() {
|
|
|
+ return {
|
|
|
+ token: 'Bearer ' + db.get("TOKEN", ""),
|
|
|
+ tenant: db.get("TENANT", "") || "",
|
|
|
+ Authorization: `Basic ${Base64.encode(`${process.env.VUE_APP_CLIENT_ID}:${process.env.VUE_APP_CLIENT_SECRET}`)}`
|
|
|
+ };
|
|
|
+ },
|
|
|
+ isVisible: {
|
|
|
+ get () {
|
|
|
+ return this.dialogVisible
|
|
|
+ },
|
|
|
+ set () {
|
|
|
+ this.close()
|
|
|
+ this.reset()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ window.onresize = () => {
|
|
|
+ return (() => {
|
|
|
+ this.width = this.initWidth()
|
|
|
+ })()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 文件列表移除文件时的钩子
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log("删除事件：", file, fileList);
|
|
|
+ // 还原数据
|
|
|
+ this.resetFile()
|
|
|
+ },
|
|
|
+ // 点击文件列表中已上传的文件时的钩子
|
|
|
+ handlePreview(file) {
|
|
|
+ console.log("上传之前事件：",file);
|
|
|
+ },
|
|
|
+ // 文件超出个数限制时的钩子
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
|
+ },
|
|
|
+ // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
|
|
|
+ beforeRemove(file, fileList) {
|
|
|
+ return this.$confirm(`确定移除 ${ file.name }？`);
|
|
|
+ },
|
|
|
+ // 文件上传成功时的钩子
|
|
|
+ handleSuccess(response, file, fileList){
|
|
|
+ console.log("文件上传成功!", response)
|
|
|
+ if(response.isSuccess){
|
|
|
+ // [上传程序]字段的值
|
|
|
+ this.tenant.filePath = response.data.url
|
|
|
+ // [程序大小]字段的值
|
|
|
+ this.tenant.size = response.data.size
|
|
|
+ // 查询【程序】信息
|
|
|
+ this.getProgram(response.data.filename)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 文件上传失败时的钩子
|
|
|
+ handleError(err, file, fileList){
|
|
|
+ console.log("文件上传失败~", err)
|
|
|
+ },
|
|
|
+ // 文件上传时的钩子
|
|
|
+ handlePropress(event, file, fileList){
|
|
|
+ console.log("文件上传~", event)
|
|
|
+ },
|
|
|
+ initTenant () {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ no: '',
|
|
|
+ name: '',
|
|
|
+ filePath: '',
|
|
|
+ size: null,
|
|
|
+ runTime: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetFile(){
|
|
|
+ // [上传程序]字段的值
|
|
|
+ this.tenant.filePath = ''
|
|
|
+ // [程序大小]字段的值
|
|
|
+ this.tenant.size = null
|
|
|
+ // [运行时间]字段的值
|
|
|
+ this.tenant.runTime = null
|
|
|
+ // [程序内容]字段的值
|
|
|
+ this.pgContent = ''
|
|
|
+ },
|
|
|
+ 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){
|
|
|
+ this.tenant = { ...val }
|
|
|
+ //赋值
|
|
|
+ this.tenant.no = val.name
|
|
|
+ // 如果附件存在 /
|
|
|
+ if(!!val.filePath){
|
|
|
+ let arr = val.filePath.split("/");
|
|
|
+ // 查询【程序】信息
|
|
|
+ this.getProgram(arr[arr.length -1])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 字典表
|
|
|
+ this.dicts = dicts
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ reset () {
|
|
|
+ // 先清除校验，再清除表单，不然有奇怪的bug
|
|
|
+ this.$refs.form.clearValidate()
|
|
|
+ this.$refs.form.resetFields()
|
|
|
+ this.tenant = this.initTenant()
|
|
|
+ // 【刀具】清空
|
|
|
+ this.toolList = []
|
|
|
+ // 【程序内容】清空
|
|
|
+ this.pgContent = ''
|
|
|
+ // 清空上传附件
|
|
|
+ this.fileList = []
|
|
|
+ },
|
|
|
+ submitForm () {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ // console.log("Form的数据：", this.tenant)
|
|
|
+ // return false
|
|
|
+ if (valid) {
|
|
|
+ this.confirmDisabled = true
|
|
|
+ if (this.type === 'add') {
|
|
|
+ this.save()
|
|
|
+ } else {
|
|
|
+ this.update()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ save () {
|
|
|
+ programCenterApi.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 () {
|
|
|
+ programCenterApi.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
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 【设备】下拉数据
|
|
|
+ equmentList() {
|
|
|
+ productionResourcesMgrApi.getList({cncProgram: '1'}).then(res => {
|
|
|
+ res = res.data
|
|
|
+ // console.log("【设备】下拉数据：", res)
|
|
|
+ if(res.isSuccess){
|
|
|
+ this.eqList = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 根据[文件名]获取文件内容
|
|
|
+ getProgram(fileName){
|
|
|
+ programCenterApi.getUploadFile({fileName: fileName}).then(res => {
|
|
|
+ res = res.data
|
|
|
+ console.log("根据[文件名]：", res)
|
|
|
+ if(res.isSuccess){
|
|
|
+ const obj = res.data
|
|
|
+ // [运行时间]字段的值
|
|
|
+ this.tenant.runTime = obj.runTime
|
|
|
+ // [程序内容]字段的值
|
|
|
+ this.pgContent = obj.content
|
|
|
+ // [刀具]列表
|
|
|
+ this.toolList = obj.toolList
|
|
|
+ // 附件数据
|
|
|
+ this.fileList = [{
|
|
|
+ name: obj.name,
|
|
|
+ url: obj.url
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .editTitle{
|
|
|
+ font-size: 17px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ border-bottom: 1px solid #CCCCCC;
|
|
|
+ }
|
|
|
+</style>
|
yaoyq