1

李喆(开发组)

6 天以前 2fb857721d32d3fce01f3487a623f5a9be2a3ac9

 src/views/wel/index.vue

@@ -13,24 +13,206 @@
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @tree-load="treeLoad"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @row-click="rowClick"
    >
      <template #menu="{row, size}">
        <el-button :size="size"
                  text
                  type="primary"
                  @click="handleAdd(row)">新增子级</el-button>
      <template #menu-left>
        <el-button :size="size" type="primary" @click="showAdd()">新增根节点</el-button>
      </template>
      <template #name="{ row }">
        <span>{{row.name}}</span>
        <el-button :size="size" text v-if="row.nodeType != 70" icon="el-icon-setting" type="primary" placeholder="修改" @click="showEdit(row)" title="修改"></el-button>
        <el-button :size="size" text icon="el-icon-delete" type="primary" @click="showDel(row)" placeholder="删除" title="删除"></el-button>
        <el-button :size="size" text v-if="row.nodeType < 60" icon="el-icon-document-add" type="primary" @click="showAdd(row)" placeholder="新增子级" title="新增子级"></el-button>
        <el-button :size="size" text v-if="row.nodeType == 60" icon="el-icon-upload" type="primary" @click="showUpload(row)" placeholder="文件上传" title="文件上传"></el-button>
        <!-- 涉密网才有 -->
        <el-button :size="size" text v-if="row.nodeType == 70 && isSM" icon="el-icon-pie-chart" type="primary" @click="upgrade(row)" placeholder="升版" title="升版"></el-button>
        <!-- 工控网才有 -->
        <el-button :size="size" text v-if="row.nodeType == 70 && !isSM" icon="el-icon-position" type="primary" @click="downsend(row)" placeholder="下发" title="下发"></el-button>
      </template>
    </avue-crud>
    <!-- 新增节点 -->
    <el-dialog :title="modalTitle" append-to-body v-model="modalBox">
      <avue-form :option="modalOption" v-model="modalForm" @submit="modalSubmit" @reset-change="modalCancel"/>
    </el-dialog>
    <el-dialog title="上传文件" append-to-body v-model="uploadmodalBox">
      <avue-form :option="uploadmodalOption" v-model="uploadmodalForm" @submit="uploadmodalSubmit" @reset-change="uploadmodalCancel" :upload-before="uploadBefore" :upload-after="uploadAfter">
        <template #fileList="{}" slot-scope="{ value }">
          <div v-for="(file, index) in fileList" :key="index" v-if="fileList.length != 0">
            {{ file.name }}
          </div>
          <div v-else>没有上传文件</div>
        </template>
      </avue-form>
    </el-dialog>
    <avue-tabs :option="tabsOption" @change="tabsHandleChange" style="margin-top: 30px;" v-if="isShowTabs"></avue-tabs>
    <avue-form v-if="tabsType == 'tab1'" :option="tabsFormOption" v-model="tabsForm"></avue-form>
    <span v-else-if="tabsType == 'tab2'">版本信息</span>
    <template v-else-if="tabsType == 'tab3'">
        {{fileContent}}
    </template>
    <el-dialog title="升版" append-to-body v-model="upgradeModal" width="500">
      <avue-form :option="upgradeModalOption" v-model="upgradeModalForm" @submit="upgradeSubmit" @reset-change="upgradeCancel"></avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>

export default {
  data() {
    return {
      upgradeModal: false,
      file: null,
      fileContent: "",
      isSM: true,  //是否是涉密网 ，工控网5个，涉密网4个
      isShowTabs: true,
      nodeTypeList: [],
      fileList: [],
      tabsType: "tab1",
      upgradeModalForm: {},
      upgradeModalOption: {
        emptyText: "取消",
        menuPosition: "right",
        column: [{
          label: '工序版次',
          prop: 'processEdition',
          labelWidth: "80",
          span: 22
        }]
      },
      tabsOption: {},
      tabsOption1: {
        column: [{
          icon: 'el-icon-info',
          label: '节点信息',
          prop: 'tab1',
        }, {
          icon: 'el-icon-warning',
          label: '版本信息',
          prop: 'tab2',
        }]
      },
      tabsOption2: {
        column: [{
          icon: 'el-icon-info',
          label: '节点信息',
          prop: 'tab1',
        }, {
          icon: 'el-icon-warning',
          label: '版本信息',
          prop: 'tab2',
        }, {
          icon: 'el-icon-warning',
          label: '文件内容',
          prop: 'tab3'
        }]
      },
      tabsFormOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '节点类型',
            prop: 'nodeTypeName',
            disabled: true,
            placeholder: " "
          },
          {
            label: '创建人',
            prop: 'createUserName',
            disabled: true,
            placeholder: " "
          },
          {
            label: '节点名称',
            prop: 'name',
            disabled: true,
            placeholder: " "
          },
          {
            label: '创建时间',
            prop: 'createTime',
            disabled: true,
            placeholder: " "
          },
          {
            label: '节点描述',
            prop: 'description',
            disabled: true,
            placeholder: " "
          },
          {
            label: '最后修改时间',
            prop: 'updateTime',
            disabled: true,
            placeholder: " "
          },
          {
            label: '备注',
            prop: 'remark',
            disabled: true,
            placeholder: " "
          }
        ]
      },
      tabsForm: {},
      uploadmodalBox: false,
      uploadmodalForm: {},
      selectedColumn: {},
      modalForm: {},
      modalOption: {
        submitText: "保存",
        emptyText: "取消",
        menuPosition: "right",
        column: [
          {
            label: '节点类型',
            prop: 'nodeType',
            labelWidth: "120",
            type: 'select',
            dicUrl: '/blade-system/dict-biz/dictionary?code=nc_node_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            disabled: true
          },
          {
            label: '设备（机床）',
            prop: 'machineCode',
            labelWidth: "120",
            type: 'select',
            dicUrl: '/blade-mdm/machine/page',
            props: {
              label: 'name',
              value: 'code',
            },
            dicFormatter(res) {
              return res.data.records;
            }
          },
          {
            label: '节点名称',
            prop: 'name',
            labelWidth: "120",
          },
          {
            label: '节点描述',
            prop: 'description',
            labelWidth: "120",
            hide: true
          },
          {
            label: '备注',
            prop: 'remark',
            type: "textarea",
            labelWidth: "120",
            span: 24
          }
        ]
      },
      modalBox: false,
      modalTitle: "",
      id: "",
      parentId:1,
      search: {
@@ -44,154 +226,449 @@
        total: 0,
      },
      option: {
        rowKey: "id",
        treeProps: {
          children: "children",
          hasChildren: 'hasChildren',
        },
        lazy: true,
        rowKey: 'id',
        addBtn: false,
        // editBtn: false,
        // delBtn: false,
        // labelWidth: 120,
        // emptyBtn: false,
        // searchSpan: 8,
        editBtn: false,
        delBtn: false,
        fit: true,
        menu: false,
        column: [
          {
            label: '目录',
            prop: 'name',
            width: '200',
            display: false
            width: '360'
          },
          {
            label: '版本',
            prop: '',
            display: false
            prop: 'abc'
          },
          {
            label: '版次',
            prop: '',
            display: false
            prop: 'abc'
          },
          {
            label: '描述',
            prop: '',
            display: false
            prop: 'abc'
          },
          {
            label: '类型',
            prop: 'nodeType',
            display: false
            prop: 'nodeTypeName'
          },
          {
            label: '设备',
            prop: '',
            display: false
            prop: 'machineCode'
          },
          {
            label: '固化状态',
            prop: '',
            display: false
            prop: 'abc'
          },
          {
            label: '锁定状态',
            prop: '',
            display: false
            prop: 'abc'
          },
          {
            label: '流程状态',
            prop: '',
            display: false
            prop: 'abc'
          },
          {
            label: '测试程序',
            prop: '',
            display: false
            prop: 'abc'
          },
          {
            label: '创建人',
            prop: 'createUser',
            display: false
          },
            prop: 'createUserName',
            width: '180'
          }
        ],
      },
      data: [],
      upData: []
    };
  },
  computed: {
    uploadmodalOption() {
      return {
        submitText: "保存",
        emptyText: "取消",
        menuPosition: "right",
        column: [
          {
            label: '节点类型',
            prop: 'modalSelect',
            prop: 'nodeType',
            labelWidth: "120",
            type: 'select',
            dicUrl: '/blade-system/dict-biz/dictionary?code=nc_node_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            hide: true
            disabled: true
          },
          {
            label: '设备（机床）',
            prop: '',
            hide: true
            label: '设备编号',
            prop: 'machineCode',
            labelWidth: "120",
            type: 'select',
            dicUrl: '/blade-mdm/machine/page',
            props: {
              label: 'name',
              value: 'code',
            },
            dicFormatter(res) {
              return res.data.records;
            },
            rules: [
              {
                required: true,
                message: '请输入设备编号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '节点名称',
            prop: 'name',
            hide: true
            label: '零组件号/图号',
            prop: 'drawingNo',
            labelWidth: "120",
            rules: [
              {
                required: true,
                message: '请输入零组件号/图号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '节点描述',
            prop: '',
            hide: true
            label: '工序',
            prop: 'processName',
            labelWidth: "120",
            rules: [
              {
                required: true,
                message: '请输入工序',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '全路径',
            prop: '',
            hide: true,
            span: 24
            label: '工序版本',
            prop: 'processEdition',
            labelWidth: "120",
            rules: [
              {
                required: true,
                message: '请输入工序版本',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '文件分类',
            prop: 'category',
            labelWidth: "120",
            type: 'select',
            dicUrl: '/blade-system/dict-biz/dictionary?code=node_file_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            rules: [
              {
                required: true,
                message: '请选择文件分类',
                trigger: 'change'
              }
            ]
          },
          {
            label: '选择文件',
            prop: 'uploadFile',
            labelWidth: "120",
            type: 'upload',
            data: {nodeId: this.id}, 
            action: "",
            showFileList: false,
            span: 24,
            tip: "请上传文件，将在提交时统一处理",
            action: "/blade-mdm/program/ncfile/upload",
            rules: [
              {
                validator: (rule, value, callback) => {
                  if (this.fileList.length === 0) {
                    callback(new Error('请上传文件'));
                  } else {
                    callback();
                  }
                },
                trigger: 'blur'
              }
            ]
          },
          {
            label: '已上传文件',
            prop: 'fileList',
            labelWidth: "120"
          },
          {
            label: '备注',
            prop: 'remark',
            type: "textarea",
            hide: true,
            labelWidth: "120",
            span: 24
          }
        ],
      },
      data: [],
    };
        ]
      }
    }
  },
  watch: {
    uploadmodalBox(old) {
      //this.onLoad();
    }
  },
  methods: {
    rowDel (row, index, done) {
      // alert(1);
      // done(row);
    upgradeSubmit(row,done) {  //升版
      axios({
        url: '/blade-mdm/program/ncfile/upgrade-process-edition',
        method: 'post',
        params: {bindNcNodeId:row.id,newProcessEdition: row.processEdition},
      }).then(
        res => {
            done();
            this.upgradeModal = false;
            this.$message.success('操作成功');
            this.addLocalTreeNode(row.parentId);
        }
      );
    },
    rowSave(row, done) {  //新增子节点
      console.log(row,123)
      // row.parentId = 1;
      // row.id = 9;
      // console.log(row,11)
      // done(row);
    upgradeCancel() {
      this.upgradeModal = false;
    },
    rowUpdate (row, index, done) {
      //alert(3);
      //done(row);
    downsend(row) {  //下发
      this.loading = true;
      axios({
        url: '/blade-mdm/program/ncfile/send-to-machine-by-nodeid',
        method: 'post',
        params: {nodeId:row.id},
      }).then(
        res => {
            this.loading = false;
            this.$message.success('操作成功');
        }
      );
    },
    handleAdd (row) {  //新增子节点
    upgrade(row) {  //升版
      this.upgradeModalForm = {...row};
      this.upgradeModal = true;
    },
    delFile(item) {
      this.loading = true;
      var obj = {id: item.id}
      axios({
        url: '/blade-mdm/program/ncfile/remove',
        method: 'post',
        params: obj,
      }).then(
        resp => {
          this.loading = false;
          this.getFile(this.id);
        }
      );
    },
    uploadBefore(file,done,loading,column) {
      this.file = file;
      this.fileList.push(file);
      //done();  放开就上传了
      return false;
    },
    uploadAfter() {
    },
    uploadmodalSubmit(row,done) {  //上传提交接口
      if(this.file == null) {
        this.$message.error('请上传文件');
        return;
      }
      var formData = new FormData();
      formData.append('file', this.file);
      formData.append('nodeId', this.id);
      Object.keys(this.uploadmodalForm).forEach(key => {
        formData.append(key, this.uploadmodalForm[key]);
      });
      this.loading = true;
      axios({
        url: '/blade-mdm/program/ncfile/upload',
        method: 'post',
        data: formData,
      }).then(
        res => {
          this.loading = false;
          this.uploadmodalBox = false;
          this.addLocalTreeNode(row.id);  //重新加载下一级
          done();
        }
      );
    },
    rowClick(row) {
      this.tabsForm = row;
      this.id = row.id;
      this.$refs.crud.rowAdd();
      this.isShowTabs = false;
      this.nodeTypeList.forEach(item=> {
        if(item.dictKey == row.nodeType) {
          this.tabsForm.nodeTypeName = item.dictValue;
        }
      })
      if(this.tabsForm.nodeType < 70) {
        this.tabsOption = this.tabsOption1;
      }else {
        this.tabsOption = this.tabsOption2;
        //获取文件list
        this.getFile(row.id);
      }
      this.$nextTick(()=> {
        this.tabsType = 'tab1';
        this.isShowTabs = true;
      })
    },
    tabsHandleChange(tabs) {
      this.tabsType = tabs.prop;
    },
    showUpload(row) {//获取文件内容
      this.fileList = [];
      this.uploadmodalForm = row;
      this.loading = true;
      var obj = {parentId: row.id}
      axios({
        url: '/blade-mdm/program/node/lazy-list',
        method: 'get',
        params: obj,
      }).then(
        res => {
          this.loading = false;
          this.uploadmodalBox = true;
        }
      );
    },
    getFile(id) { //查看文件内容
      this.loading = true;
      axios({
        url: '/blade-mdm/program/ncfile/content-by-nodeid',
        method: 'get',
        params: {nodeId:id},
      }).then(
        res => {
          this.loading = false;
          this.fileContent = res.data.data;
        }
      );
    },
    showEdit(row,done) {
      this.modalTitle = "修改";
      this.modalBox = true;
      this.modalForm = row;
    },
    showDel(row) {
      this.$confirm('将会删除该节点及其子节点，是否确认删除?', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }).then(() => {
        //调用接口
        this.loading = true;
        axios({
          url: '/blade-mdm/program/node/remove',
          method: 'post',
          params: {id: row.id},
        }).then(
          res => {
            this.loading = false;
            this.addLocalTreeNode(row.parentId);
          }
        );
      })
    },
    showAdd (row) {  //新增子节点
      if(!row) {
        this.modalTitle = "新增根节点";
        this.modalForm.nodeType = "10";
        this.modalForm.parentId = 0;
      }else {
        if(row.nodeType == 60) {
          return;
        }
        this.modalTitle = "新增子节点";
        this.selectedColumn.nodeType = String(Number(row.nodeType) + 10);
        this.selectedColumn.parentId = row.id;
        this.selectedColumn.name = "";
        this.selectedColumn.id = "";
        this.modalForm = this.selectedColumn;
      }
      this.modalBox = true;
    },
    modalSubmit(row,done) {  //新增子节点保存/修改
      if(this.modalTitle == "修改") {
        var url = "/blade-mdm/program/node/update";
      }else {
        var url = "/blade-mdm/program/node/save";
      }
      //调用接口
      this.loading = true;
      axios({
        url,
        method: 'post',
        data: this.modalForm,
      }).then(
        res => {
          this.$message.success('操作成功');
          this.modalBox = false;
          // 修改，更新本地数据
          if (this.modalTitle === "修改") {
            this.addLocalTreeNode(row.parentId);
          }else {
            // 如果是新增操作，可能需要重新加载数据
            //this.$refs.crud.refreshTable();
            //this.onLoad();
            //新增，更新本地数据
            this.addLocalTreeNode(row.parentId);
          }
          this.loading = false;
          done(row);
        }
      );
    },
    addLocalTreeNode(parentId) {
      if(this.modalTitle == "新增根节点") {
        this.onLoad();
        return;
      }
      this.loading = true;
      var obj = {parentId: parentId}
      axios({
        url: '/blade-mdm/program/node/lazy-list',
        method: 'get',
        params: obj,
      }).then(
        res => {
          var children = res.data.data || [];
          if(parentId == 0) {
            this.data = [...children];
          }else {
            this.$refs.crud.$refs.table.store.states.lazyTreeNodeMap.value[parentId] = [...children];
          }
          this.loading = false;
        }
      );
    },
    modalCancel() {
      this.modalBox = false;
    },
    uploadmodalCancel() {
      this.uploadmodalBox = false;
    },
    treeLoad (tree, treeNode, resolve) {
      // setTimeout(() => {
      //   this.parentId += 1;
      //   var hasChildren = true;
      //   if(this.parentId == 6) {
      //     this.$message.error("到头了");
      //     hasChildren = false;
      //   }
      //   resolve([{
      //     id: this.parentId,
      //     parentId: this.parentId,
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '新增',
      //     hasChildren: hasChildren
      //   }]);
      //   console.log(tree,111)
      // }, 100);
      this.loading = true;
      var obj = {parentId: tree.id}
      axios({
@@ -200,30 +677,11 @@
        params: obj,
      }).then(
        res => {
          resolve(res.data.data);
          console.log(res.data,111)
          this.loading = false;
          resolve(res.data.data);
        }
      );
      // this.data =   [{
      //     id: this.parentId,
      //     parentId: this.parentId,
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: 'hhh',
      //     hasChildren: true
      //   },
      //   {
      //     id: 7,
      //     parentId: 7,
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: 'hhh',
      //     hasChildren: false
      //   }]
      //   this.loading = false;
    },
    handleEdit(row,index) {
      
    },
    currentChange(current) {
      this.mypage.current = current;
@@ -243,34 +701,47 @@
        params: obj,
      }).then(
        res => {
          this.data = res.data.data;
          this.loading = false;
          this.data = res.data.data;
          if(this.data.length == 0) {
            return;
          }
          this.tabsForm = res.data.data[0];  //节点信息
          this.nodeTypeList.forEach(item=> {
            if(item.dictKey == this.data[0].nodeType) {
              this.tabsForm.nodeTypeName = item.dictValue;
            }
          })
        }
      );
      // this.data =   [{
      //     id: this.parentId,
      //     parentId: this.parentId,
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: 'hhh',
      //     hasChildren: true
      //   },
      //   {
      //     id: 7,
      //     parentId: 7,
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: 'hhh',
      //     hasChildren: false
      //   }]
      //   this.loading = false;
    }
  },
  mounted() {
    this.tabsOption = this.tabsOption1;
    //获取nodetype
    axios({url: '/blade-system/dict-biz/dictionary?code=nc_node_type',method: 'get'}).then(res => {
        this.nodeTypeList = res.data.data;
      }
    );
    //判断版本  0:涉密网，1:工控网；//工控网5个，涉密网4个  
    // axios({url: '/blade-mdm/system/param/getValue?paramKey=networkType',method: 'get'}).then(res => {
    //     if(res.data.data === "0") {
    //       this.isSM = true;
    //     }
    //   }
    // );
  }
};
</script>

<style lang="scss">
.el-form-item__label {
  width: 120px!important;
.delFile {
  color: red;
  margin-left: 12px;
  cursor: pointer;
}
.fileListStyle {
  margin-left: 10px;
  margin-top: 12px;
}
</style>