mdmweb.git - Gitblit

<template>
  <el-row>
    <el-col :span="5">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="19">
      <basic-container>
        <avue-crud
          :addBtn="false"
          :option="option"
          :table-loading="loading"
          :data="data"
          ref="crud"
          v-model:search="search"
          v-model:page="mypage"
          @search-change="searchChange"
          @search-reset="searchReset"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="onLoad"
        >
          <template #menu-left>
            <el-button type="primary" size="default" icon="el-icon-circle-plus" plain @click="handleExport">导出</el-button>
 
 
            <el-upload :show-file-list="false" class="upload-demo"
                action="/api/blade-mdm/machine/import"
                       :on-change="handleChange">
              <el-button type="primary" plain size="default">导入</el-button>
            </el-upload>
 
 
 
            <el-button type="primary" size="default" icon="el-icon-circle-plus" plain @click="handleAdd">新增</el-button>
          </template>
          <template #menu="scope">
            <el-button type="primary" text size="default" icon="el-icon-upload" @click.stop="handleEdit(scope.row, scope.index)">编辑</el-button>
            <el-button type="primary" text size="default" icon="el-icon-upload" @click.stop="handleDel(scope.row, scope.index)">删除</el-button>
            <el-button type="primary" text size="default" icon="el-icon-upload" @click.stop="handleUp(scope.row, scope.index)">产生机床回传机构树</el-button>
          </template>
 
          <template #status="{ row }">
            <span>{{ row.status=="1"?"启用":"禁用" }}</span>
          </template>
        </avue-crud>
 
        <el-dialog :title="machineTitle" append-to-body v-model="editBox" width="60%">
          <avue-form ref="editFormModal1" :option="editFormModal" v-model="editForm" @submit="formSubmit" @resetForm="resetForm">
            <template #ownerDept="{}">
              <el-tree-select v-model="editForm.ownerDept" :data="organizationTreeList" :props="treePropsConfig"/>
            </template>
          </avue-form>
        </el-dialog>
      </basic-container>
    </el-col>
  </el-row>
</template>
 
<script>
import { exportBlob } from '@/api/common';
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
import { downloadXls } from '@/utils/util';
import 'nprogress/nprogress.css';
import { getDeptLazyTree } from '@/api/system/dept';
export default {
  data() {
    var that = this;
    return {
      treeOption: {
        nodeKey: 'id',
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getDeptLazyTree(parentId).then(res => {
            resolve(
              res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren,
                };
              })
            );
          });
        },
        addBtn: false,
        menu: false,
        size: 'small',
        props: {
          labelText: '标题',
          label: 'title',
          value: 'value',
          children: 'children',
        },
      },
      treeData: [],
      treePropsConfig: {
        value:  'id',
        label: 'title',
        children: 'children'
      },
      organizationTreeList: [],
      machineTitle: "新增",
      isAdd: true,
      editBox: false,
      search: {
        keyword: "",
        machineGroupCode: ""
      },
      loading: true,
      mypage: {
        size: 10,
        current: 1,
        total: 0,
      },
      editForm: {},
      option: {
        index: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        labelWidth: 120,
        emptyBtn: false,
        searchSpan: 8,
        column: [
          {
            label: '编号/名称',
            type: 'input',
            prop: 'keyword',
            search: true,
            hide: true,
            showColumn: false
          },
          {
            label: '机床编号',
            prop: 'code'
          },
          {
            label: '机床型号',
            prop: 'name',
          },
          {
            label: '机床组',
            prop: 'machineGroupName',
            search: true,
            type: 'select',
            dicUrl: '/blade-system/dict-biz/dictionary?code=machine_group',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            span: "8"
          },
          {
            label: '机床类型',
            prop: 'machineSpecName',
          },
          {
            label: '生产厂商',
            prop: 'manufacturer',
          },
          {
            label: '操作员',
            prop: 'operator',
          },
          {
            label: '状态',
            prop: 'status',
            slot: true,
          },
        ],
      },
      editFormModal: {
        labelWidth: 160,
        submitBtn: true,
        submitText: "保存",
        emptyBtn: false,
        column: [
          {
            label: '机床编号',
            prop: 'code',
            type: 'input',
            span: 12,
            dataType: 'string',
            rules: [
              {
                required: true,
                message: '请输入机床编号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '机床型号',
            prop: 'name',
            type: 'input',
            span: 12,
            dataType: 'string',
            rules: [
              {
                required: true,
                message: '请输入机床型号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '机床类型',
            prop: 'machineSpec',
            type: 'select',
            span: 12,
            dicUrl: '/blade-system/dict-biz/dictionary?code=machine_spec',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            rules: [
              {
                required: true,
                message: '请选择机床类型',
                trigger: 'change'
              }
            ]
          },
          {
            label: '所属机床组',
            prop: 'machineGroupCode',
            type: 'select',
            span: 12,
            dicUrl: '/blade-system/dict-biz/dictionary?code=machine_group',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            rules: [
              {
                required: true,
                message: '请选择所属机床组',
                trigger: 'change'
              }
            ]
          },
          {
            label: '操作员',
            prop: 'operator',
            type: 'input',
            span: 12,
            dataType: 'string',
          },
          {
            label: '所属组织',
            prop: 'ownerDept',
            type: 'tree',
            span: 12,
            rules: [
              {
                required: true,
                message: '请选择所属组织',
                trigger: 'click'
              }
            ]
          },
          {
            label: '生产商',
            prop: 'manufacturer',
            type: 'input',
            span: 12,
            dataType: 'string',
          },
          {
            label: '系统控制',
            prop: 'controlSystem',
            type: 'select',
            span: 12,
            dicUrl: '/blade-system/dict-biz/dictionary?code=machine_control_system',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            }
          },
          {
            label: '状态',
            prop: 'status',
            type: 'checkbox',
            span: 12,
            dicData: [{
              label: '启用',
              value: 1
            }]
          },
          {
            label: '程序下发目录',
            prop: 'progSendDir',
            type: 'input',
            span: 12,
            dataType: 'string',
          },
          {
            label: '程序回传目录',
            prop: 'progReceiveDir',
            type: 'input',
            span: 12,
            dataType: 'string',
          },
          {
            label: '程序临时目录',
            prop: 'progTempDir',
            type: 'input',
            span: 12,
            dataType: 'string',
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            span: 24,
            dataType: 'string',
          },
        ]
      },
      data: [],
    };
  },
  methods: {
    handleChange(a,b,c) {
      console.log(a,b,c);
    },
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.mypage.current = 1;
      this.onLoad(this.page);
    },
    handleAdd() {
      this.machineTitle = "新增";
      this.isAdd = true;
      this.editBox = true;
      this.$refs.editFormModal1.resetForm();
    },
    handleEdit(row,index) {
      this.machineTitle = "编辑";
      this.isAdd = false;
      axios({
        url: '/blade-mdm/machine/detail',
        method: 'get',
        params: {id: row.id},
      }).then(
        res => {
          res.data.data.status = [res.data.data.status];
          this.editForm = res.data.data;
          this.editBox = true;
        },
        error => {
          this.loading = false;
        }
      );
    },
    handleDel(row,index) {
      this.loading = true;
      axios({
        url: '/blade-mdm/machine/remove',
        method: 'post',
        params: {ids: row.id},
      }).then(
        res => {
          this.loading = false;
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.onLoad();
          done();
        },
        error => {
          this.loading = false;
        }
      );
    },
    handleUp(row,index) {
      this.loading = true;
      axios({
        url: '/blade-mdm/machine/gen-fileback-dirs',
        method: 'post',
        params: {id: row.id},
      }).then(
        res => {
          this.loading = false;
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.onLoad();
          done();
        },
        error => {
          this.loading = false;
        }
      );
    },
    handleExport() {
      this.$confirm('是否导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(
          `/blade-mdm/machine/export?${this.website.tokenHeader}=${getToken()}`
        ).then(res => {
          downloadXls(res.data, `导出机床${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
          NProgress.done();
        });
      });
    },
    formSubmit(params, done) {
      var obj = {...params};
      if(params.status.length == 0) {
        obj.status = "0";
      }else {
        obj.status = "1";
      }
      if(this.isAdd) {  //新增
        var url = '/blade-mdm/machine/save';
      }else {
        var url = '/blade-mdm/machine/update';
      }
      this.loading = true;
      axios({url: url,method: 'post',data: obj}).then(res => {
        this.loading = false;
        if(res,res.data.success) {
          this.editBox = false;
          this.$message({type: 'success',message: '操作成功!'});
          this.onLoad();
        }else {
          this.$message({type: 'error',message: res.data.msg});
        }
        done();
      });
    },
    handleView() {
 
    },
    searchReset() {
      //this.onLoad(this.mypage);
    },
    searchChange(params, done) {
      this.mypage.current = 1;
      this.onLoad();
      done();
    },
    currentChange(current) {
      this.mypage.current = current;
    },
    sizeChange(size) {
      this.mypage.size = size;
    },
    refreshChange() {
      
    },
    onLoad() {
      this.$nextTick(()=> {
        this.loading = true;
        var obj = {
          keyword: this.search.keyword,
          machineGroupCode: this.search.machineGroupName,
          current: this.mypage.current,
          size: this.mypage.size,
          deptId: this.treeDeptId
        }
        axios({
          url: '/blade-mdm/machine/page',
          method: 'get',
          params: obj,
        }).then(
          res => {
            const data = res.data.data;
            this.mypage.total = data.total;
            this.data = data.records;
            this.loading = false;
          },
          error => {
              
          }
        );
      })
    },
    traversalLabelValueToTree(tree) {  //遍历数组
      return tree.map(node => {
        // 1. 添加 label 和 value 字段
        const newNode = {
          ...node,
          label: node.fullName,
          value: node.id,
        };
        // 2. 如果有 children，递归处理
        if (node.children && node.children.length > 0) {
          newNode.children = this.traversalLabelValueToTree(node.children);
        }
        return newNode;
      });
    }
  },
  mounted() { 
    //所属组织 /api/blade-system/dept/tree
    axios({url: '/blade-system/dept/tree',method: 'get'}).then(resp => {
      this.organizationTreeList = this.traversalLabelValueToTree(resp.data.data);
    })
  }
};
</script>
 
<style lang="scss">
.upload-demo {
  display: inline-block;
  margin-left: 6px;
  margin-right: 6px;
}
</style>