|
|
@@ -0,0 +1,387 @@
|
|
|
+<!-- NC程序-新增-->
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :title="title"
|
|
|
+ :append-to-body="true"
|
|
|
+ :visible.sync="isVisible"
|
|
|
+ width="800px"
|
|
|
+ top="50px"
|
|
|
+ >
|
|
|
+ <div class="uploadProgram">
|
|
|
+ <el-form ref="form" :model="tenant" :disabled="formDisabled" :rules="rules" label-position="right" label-width="130px">
|
|
|
+ <!-- 设备 -->
|
|
|
+ <el-form-item :label='$t("prepare.searchForm.resourceId")+"："' prop="resourceIds">
|
|
|
+ <el-select v-model="tenant.resourceIds" :placeholder='$t("common.pleaseSelect")' style="width: 50%;">
|
|
|
+ <el-option v-for="item in selectedEq" :key="item.resourceId" :label="item.name" :value="item.resourceId+','+item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 上传程序 -->
|
|
|
+ <el-form-item :label='$t("resource.form.pgUpload")+"："' prop="filePath">
|
|
|
+ <el-input v-model="fileObj.filePath" :readOnly="true" :placeholder='$t("common.pleaseEnter")'/>
|
|
|
+ <el-upload
|
|
|
+ accept=".*"
|
|
|
+ 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-item :label='$t("resource.form.workTime")+"："' prop="workTime">
|
|
|
+ <el-input v-model="tenant.workTime" :placeholder='$t("common.pleaseEnter")' style="width: 50%;"/> 分钟
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 程序内容 -->
|
|
|
+ <el-form-item :label='$t("resource.form.pgContent")+"："' prop="pgContent">
|
|
|
+ <el-input v-model="pgContent" :readOnly="true" type="textarea" :rows="6" style="width: 100%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 刀具解析结果 -->
|
|
|
+ <div>
|
|
|
+ <h2 class="editTitle">{{$t("prepare.common.toolfx")}}</h2>
|
|
|
+ <el-table
|
|
|
+ :data="toolList"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column prop="specification" :label='$t("resource.table.programTool.specification")'></el-table-column>
|
|
|
+ <el-table-column prop="model" :label='$t("resource.table.programTool.model")'></el-table-column>
|
|
|
+ <el-table-column prop="brand" :label='$t("resource.table.programTool.brand")'></el-table-column>
|
|
|
+ <el-table-column prop="usageTime" :label='$t("resource.table.programTool.usageTime")'></el-table-column>
|
|
|
+ <el-table-column prop="duration" :label='$t("resource.table.programTool.duration")'></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer" style="margin-top: 15px;text-align: right;">
|
|
|
+ <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
|
+ <el-button plain type="primary" :disabled="subBtn" @click="submitForm">{{ $t('common.confirm') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </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: 'ProgramncMgr',
|
|
|
+ props: {
|
|
|
+ dialogVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ selectedEq: [], // 新增和修改的设备[设备]数据-来自·（可执行设备（位置））
|
|
|
+ subBtn: false,
|
|
|
+ formDisabled: false,
|
|
|
+ tableData: [],
|
|
|
+ eqList: [], // 设备下拉类别数据
|
|
|
+ toolList: [], // 刀具列表
|
|
|
+ pgContent: '', // 程序内容
|
|
|
+ type: 'add',
|
|
|
+ tenant: this.initTenant(),
|
|
|
+ screenWidth: 0,
|
|
|
+ width: this.initWidth(),
|
|
|
+ confirmDisabled: false,
|
|
|
+ fileObj: {}, // 附件信息
|
|
|
+ // 附件上传
|
|
|
+ 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'}
|
|
|
+ */],
|
|
|
+ rules: {
|
|
|
+ resourceIds: [
|
|
|
+ { required: true, message: this.$t("rules.require"), trigger: 'change' }
|
|
|
+ ],
|
|
|
+ filePath1: [
|
|
|
+ { required: true, message: this.$t("rules.require"), trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
|
|
|
+ created() {
|
|
|
+ // 查询【程序】信息
|
|
|
+ if(!!this.programId){
|
|
|
+ this.getProgram(this.programId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ programId(val){
|
|
|
+ console.log("值变化了：", val)
|
|
|
+ // 查询【程序】信息
|
|
|
+ this.getProgram(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.fileObj.filePath = response.data.url
|
|
|
+ // [程序大小]字段的值
|
|
|
+ this.fileObj.size = response.data.size
|
|
|
+ // [程序id]
|
|
|
+ this.fileObj.programId = response.data.bizId
|
|
|
+ // 查询【程序】信息
|
|
|
+ // this.getProgram(response.data.filename)
|
|
|
+ this.getProgram(response.data.bizId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 文件上传失败时的钩子
|
|
|
+ handleError(err, file, fileList){
|
|
|
+ console.log("文件上传失败~", err)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 文件上传时的钩子
|
|
|
+ handlePropress(event, file, fileList){
|
|
|
+ console.log("文件上传~", event)
|
|
|
+ },
|
|
|
+
|
|
|
+ initTenant () {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ no: '',
|
|
|
+ submittedFileName: '',
|
|
|
+ workTime: '',
|
|
|
+ filePath: '',
|
|
|
+ size: null,
|
|
|
+ runTime: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ resetFile(){
|
|
|
+ // [上传程序]字段的值
|
|
|
+ this.tenant.filePath = '';
|
|
|
+ this.fileObj.filePath = '';
|
|
|
+ // [程序大小]字段的值
|
|
|
+ this.tenant.size = null;
|
|
|
+ // [加工时间]字段的值
|
|
|
+ this.tenant.workTime = 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, selectedEq) {
|
|
|
+ // console.log("设备：", selectedEq)
|
|
|
+ // 表单下拉数据，赋值，动态数据
|
|
|
+ this.selectedEq = selectedEq;
|
|
|
+
|
|
|
+ if(val){
|
|
|
+ this.tenant = { ...val }
|
|
|
+ // 如果附件存在 /
|
|
|
+ if(!!val.id){
|
|
|
+ // 查询【程序】信息
|
|
|
+ this.getProgram(val.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ close () {
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+
|
|
|
+ reset () {
|
|
|
+ console.log("清空了多少次！！！！！");
|
|
|
+ // 先清除校验，再清除表单，不然有奇怪的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的数据123：", this.tenant, valid);
|
|
|
+ if (valid) {
|
|
|
+ let obj = {...this.tenant, ...this.fileObj};
|
|
|
+ // 把生产资源id,分开
|
|
|
+ if(!!obj.resourceIds){
|
|
|
+ let arr = this.tenant.resourceIds.split(",");
|
|
|
+ obj.resourceId = arr[0]; // 设备id
|
|
|
+ obj.name = arr[1]; // 设备名称
|
|
|
+ }
|
|
|
+ console.log("Form最终数据：", obj);
|
|
|
+ // 恢复按钮
|
|
|
+ this.confirmDisabled = true;
|
|
|
+ // 传值父组件
|
|
|
+ this.$emit("success", obj);
|
|
|
+ // 关闭
|
|
|
+ this.$emit("close");
|
|
|
+ // 初始化数据
|
|
|
+ this.reset();
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 【设备】下拉数据
|
|
|
+ equmentList() {
|
|
|
+ productionResourcesMgrApi.getList({cncProgram: '1'}).then(res => {
|
|
|
+ res = res.data
|
|
|
+ // console.log("【设备】下拉数据：", res)
|
|
|
+ if(res.isSuccess){
|
|
|
+ this.eqList = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 根据[程序ID]获取文件内容
|
|
|
+ getProgram(programId){
|
|
|
+ programCenterApi.getProgram({id: programId}).then(res => {
|
|
|
+ res = res.data
|
|
|
+ console.log("根据[程序ID]：", res.data)
|
|
|
+ if(res.isSuccess){
|
|
|
+ const obj = res.data
|
|
|
+ // [程序内容]字段的值
|
|
|
+ this.pgContent = obj.content
|
|
|
+ // [刀具]列表
|
|
|
+ this.toolList = obj.toolList
|
|
|
+ // 附件数据
|
|
|
+ this.fileList = [{
|
|
|
+ name: obj.name,
|
|
|
+ url: obj.url
|
|
|
+ }]
|
|
|
+ // 附件-赋值
|
|
|
+ // this.fileObj = res.data;
|
|
|
+ // 需要回填的信息
|
|
|
+ this.fileObj.nc = '1' // 表示已经上传
|
|
|
+ this.fileObj.submittedFileName = obj.name
|
|
|
+ this.fileObj.filePath = obj.url
|
|
|
+ this.fileObj.runTime = obj.runTime
|
|
|
+ this.fileObj.toolList = obj.toolList
|
|
|
+ this.fileObj.toolNums = obj.toolList ? obj.toolList.length : 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</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