研发图纸文件管理系统-前端项目
longyvfengyun
2022-07-29 9917bd8dca4d820cc31a7edf3b9fccb708f99f6d
内容提交
4个文件已添加
7个文件已修改
515 ■■■■ 已修改文件
src/assets/js/const/const_job_status.js 26 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/websocket/getWsUrl.js 23 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/websocket/index.js 117 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/websocket/plus.js 149 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/workplace/WorkPlace.vue 16 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/workplace/apis.js 17 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/workplace/const_total.js 28 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/workplace/myDraw/MyDraw.vue 127 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/workplace/notApproved/NotApproved.vue 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/workplace/rejectedList/RejectedList.vue 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/workplace/workForm/SubmitForm.vue 11 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/const/const_job_status.js
New file
@@ -0,0 +1,26 @@
export default [
  {
    key: 0,
    label: "已驳回",
    color: "pink",
    value: 0
  },
  {
    key: 1,
    label: "经理处理中",
    color: "green",
    value: 1
  },
  {
    key: 2,
    label: "总经理处理中",
    color: "green",
    value: 2
  },
  {
    key: 5,
    label: "已完结",
    color: "blue",
    value: 5
  },
]
src/assets/js/websocket/getWsUrl.js
New file
@@ -0,0 +1,23 @@
/**
 * 获取Websocket的连接
 * @param action
 * @returns {string}
 */
function getWsUrl(action, port) {
  let _port = port ? port : 8092;
  let hostname = window.location.hostname;
  let wsProtocol = "ws://";
  if(window.location.protocol == "https:") {
    wsProtocol = "wss://";
  }
  if (process.env.NODE_ENV == 'dev') {
    hostname = "localhost";
  }else {
    _port = window.location.port;
  }
  // 处理端口为80
  _port = _port == 80?"":":"+_port;
  return wsProtocol + hostname + _port + '/cad/' + action;
}
export default getWsUrl;
src/assets/js/websocket/index.js
New file
@@ -0,0 +1,117 @@
import getWsUrl from './getWsUrl';
export default function (url) {
  const wsUri = getWsUrl(url);
  // 重连时间间隔 默认10秒
  const reConnectDelay = 10 * 1000;
  return {
    data() {
      return {
        SOCKET: null,
        reConnectDelay,
        timer: null
      }
    },
    computed: {
      isWSOpen: {
        cache: false,
        get() {
          return this.SOCKET && 1 == this.SOCKET.readyState;
        }
      }
    },
    methods: {
      // 打开链接
      openSocket() {
        // 初始化WebSocket 如果已经初始化 则什么都不做
        if (this.SOCKET) {
          return false;
        }
        this.WSClose();
        this.WSInit();
      },
      // 初始化
      WSInit() {
        // 未被初始化初始化
        if (!this.isWSOpen) {
          console.log('=====WSinit, url:', wsUri);
          let SOCKET = new WebSocket(wsUri);
          this.SOCKET = SOCKET;
          this.SOCKET.onmessage = this.onWSMessage;
          this.SOCKET.onopen = this.onWSOpen;
          this.SOCKET.onerror = this.onWSError;
          this.SOCKET.onclose = this.WSClose;
        }
      },
      onWSOpen() {
      },
      onWSMessage() {
      },
      onWSError(Event) {
        console.log('链接失败', wsUri);
        this.WSClose(Event);
      },
      WSClose(Event) {
        if (this.SOCKET) {
          switch (this.SOCKET.readyState) {
            case 0:
              this.SOCKET.onopen = () => {
                this.SOCKET.close();
                console.log('链接关闭', wsUri, 'close事件对象:', Event);
                this.SOCKET = null;
                // 没有event对象 则为手动关闭
                if (Event) {
                  this.reConnect();
                }
              }
              break;
            case 1:
              this.SOCKET.close();
              console.log('链接关闭', wsUri, 'close事件对象:', Event);
              this.SOCKET = null;
              // 没有event对象 则为手动关闭
              if (Event) {
                this.reConnect();
              }
              break;
            case 2:
              this.SOCKET.onclose = () => {
                console.log('链接关闭', wsUri, 'close事件对象:', Event);
                this.SOCKET = null;
                // 没有event对象 则为手动关闭
                if (Event) {
                  this.reConnect();
                }
              }
              break;
            case 3:
              console.log('链接关闭', wsUri, 'close事件对象:', Event);
              this.SOCKET = null;
              // 没有event对象 则为手动关闭
              if (Event) {
                this.reConnect();
              }
              break;
          }
        }
      },
      // 重连
      reConnect() {
        // 重连计时开始 就不另重连
        if (this.timer) {
          return;
        }
        this.timer = setTimeout(() => {
          this.timer = null;
          this.WSInit();
        }, this.reConnectDelay);
      }
    },
    mounted() {
      this.openSocket();
    },
    beforeDestroy() {
      this.WSClose();
    }
  }
}
src/assets/js/websocket/plus.js
New file
@@ -0,0 +1,149 @@
import getWsUrl from './getWsUrl';
/**
 * @param  {...any} urls 地址可以传多个 用来初始化多个不同的websocket实例
 * 对应的websocket对象及事件都带上对应的系号 this.SOCKET1  onWSMessage1 等
 * @returns minxins对象
 */
export default function (...urls) {
  // 重连时间间隔 默认10秒
  const reConnectDelay = 10 * 1000;
  let data = {},
    computed = {},
    ourl = {},
    methods = {},
    len = urls.length;
  const fn = () => { };
  for (let i = 0; i < len; i++) {
    let idx = i + 1;
    data['Stimer' + idx] = null;
    data['SOCKET' + idx] = null;
    ourl[idx] = getWsUrl(urls[i]);
    computed['isWSOpen' + idx] = {
      cache: false,
      get () {
        return this['SOCKET' + idx] && 1 == this['SOCKET' + idx].readyState;
      }
    };
    methods['onWSMessage' + idx] = fn;
    methods['onWSOpen' + idx] = fn;
    methods['onWSError' + idx] = ((idx) => {
      return function (Event) {
        console.log('链接失败', ourl[idx]);
        this['WSClose' + idx](Event);
      }
    })(idx);
    methods['reConnect' + idx] = function () {
      this['Stimer' + idx] = setTimeout(() => {
        this['Stimer' + idx] = null;
        this.WSInit();
      }, this.reConnectDelay);
    };
    methods['WSClose' + idx] = function (Event) {
      let socket = this['SOCKET' + idx];
      const wsUri = ourl[idx];
      if (socket) {
        switch (socket.readyState) {
          case 0:
            socket.onopen = () => {
              socket.close();
              console.log('链接关闭', wsUri, 'close事件对象:', Event);
              this['SOCKET' + idx] = null;
              // 没有event对象 则为手动关闭
              if (Event) {
                this['reConnect' + idx]();
              }
            }
            break;
          case 1:
            socket.close();
            console.log('链接关闭', wsUri, 'close事件对象:', Event);
            this['SOCKET' + idx] = null;
            // 没有event对象 则为手动关闭
            if (Event) {
              this['reConnect' + idx]();
            }
            break;
          case 2:
            socket.onclose = () => {
              console.log('链接关闭', wsUri, 'close事件对象:', Event);
              this['SOCKET' + idx] = null;
              // 没有event对象 则为手动关闭
              if (Event) {
                this['reConnect' + idx]();
              }
            }
            break;
          case 3:
            console.log('链接关闭', wsUri, 'close事件对象:', Event);
            this['SOCKET' + idx] = null;
            // 没有event对象 则为手动关闭
            if (Event) {
              this['reConnect' + idx]();
            }
            break;
        }
      }
    }
  }
  return {
    data() {
      return {
        ...data,
        reConnectDelay
      }
    },
    computed: {
      ...computed
    },
    methods: {
      ...methods,
      // 打开链接
      openSocket() {
        // 初始化WebSocket 如果已经初始化 则什么都不做
        let flag = true;
        for (let i = 0; i < len; i++) {
          let idx = i + 1;
          // 如果有任何一个socket为null 则重新初始化
          if (!this['SOCKET' + idx]) {
            flag = false;
            break;
          }
        }
        if (flag) {
          return false;
        }
        this.WSClose();
        this.WSInit();
      },
      // 初始化
      WSInit() {
        // 未被初始化初始化
        for (let i = 0; i < len; i++) {
          let idx = i + 1;
          if (!this['isWSOpen' + idx]) {
            console.log('=====WSinit, url:', ourl[idx]);
            let SOCKET = new WebSocket(ourl[idx]);
            this['SOCKET' + idx] = SOCKET;
            this['SOCKET' + idx].onmessage = this['onWSMessage' + idx];
            this['SOCKET' + idx].onopen = this['onWSOpen' + idx];
            this['SOCKET' + idx].onerror = this['onWSError' + idx];
            this['SOCKET' + idx].onclose = this['WSClose' + idx];
          }
        }
      },
      WSClose() {
        for (let i = 0; i < len; i++) {
          let idx = i + 1;
          this['WSClose' + idx]();
        }
      },
    },
    mounted() {
      this.openSocket();
    },
    beforeDestroy() {
      this.WSClose();
    }
  }
}
src/pages/workplace/WorkPlace.vue
@@ -6,7 +6,7 @@
      </a-col>
    </a-row>
    <div style="margin-top: 8px">
      <my-draw :is-show="'myDraw'==cardName"></my-draw>
      <my-draw :is-show="'my'==cardName"></my-draw>
      <not-approved :is-show="'approving'==cardName"></not-approved>
      <rejected-list :is-show="'rejected'==cardName"></rejected-list>
      <approved-list :is-show="'approved'==cardName"></approved-list>
@@ -28,6 +28,9 @@
import {statusStatistic} from "@/pages/workplace/apis";
import HandlingList from "@/pages/workplace/handlingList/HandlingList";
import HandledList from "@/pages/workplace/handledList/HandledList";
import createWs from "@/assets/js/websocket";
const WSMixin = createWs("worksheet");
export default {
  name: 'WorkPlace',
  components: {
@@ -39,16 +42,25 @@
    MyDraw,
    TotalCard
  },
  mixins: [WSMixin],
  data() {
    return {
      loading: false,
      drawUploadVisible: false,
      cardName: "myDraw",
      cardName: "my",
      totals: const_total.normal,
      radio: 0,
    }
  },
  methods: {
    onWSMessage(res) {
      let rs = JSON.parse(res.data);
      let data = rs.data;
      this.totals.map(item=>{
        let name = item.name;
        item.value = data[name]?data[name]:0;
      });
    },
    changeTotalCard(info) {
      this.cardName = info.name;
    },
src/pages/workplace/apis.js
@@ -14,6 +14,23 @@
}
/**
 * 我的工单
 * @param pageNum 当前页
 * @param pageSize 每页的数据量
 * @returns {AxiosPromise}
 */
export const myListPage = (pageNum, pageSize)=>{
  return axios({
    method: "GET",
    url: "worksheetMain/myListPage",
    params: {
      pageNum,
      pageSize
    }
  });
}
/**
 * 工作流-总经理审批
 * @param data 传参
 * @returns {AxiosPromise}
src/pages/workplace/const_total.js
@@ -1,9 +1,9 @@
export default {
  normal: [
    {
      name: "myDraw",
      title: "我的图纸",
      type: "",
      name: "my",
      title: "我的工单",
      type: "my",
      span: 6,
      value: 0
    },
@@ -31,9 +31,9 @@
  ],
  projectManage: [
    {
      name: "myDraw",
      title: "我的图纸",
      type: "",
      name: "my",
      title: "我的工单",
      type: "my",
      span: 4,
      value: 0
    },
@@ -74,13 +74,13 @@
    },
  ],
  generalManage: [
    {
      name: "myDraw",
      title: "我的图纸",
      type: "",
      span: 6,
      value: 0
    },
    // {
    //   name: "myDraw",
    //   title: "我的工单",
    //   type: "",
    //   span: 6,
    //   value: 0
    // },
    {
      name: "handling",
      title: "待处理",
@@ -90,7 +90,7 @@
    },
    {
      name: "approved",
      title: "已审批",
      title: "已处理",
      type: "success",
      span: 6,
      value: 0
src/pages/workplace/myDraw/MyDraw.vue
@@ -6,7 +6,7 @@
          :columns="columns"
          :loading="loading"
          title=""
          row-key="name"
          row-key="id"
          @search="onSearch"
          @refresh="onRefresh"
          @reset="onReset"
@@ -29,8 +29,13 @@
              :before-upload="beforeUpload"
              :showUploadList="false"
              @change="uploadChange">
            <a-button type="primary" size="small">新建图纸</a-button>
            <a-button type="primary" size="small">新建工单</a-button>
          </a-upload>
        </template>
        <template slot="jobStatus" slot-scope="{record}">
          <a-tag :color="record.statusInfo.color">
            {{record.statusInfo.label}}
          </a-tag>
        </template>
        <template slot="approvalState" slot-scope="{text}">
          <a-tag v-if="text==1" color="blue">
@@ -62,9 +67,7 @@
          </template>
        </template>
        <template slot="action" slot-scope="scope">
          <a @click="scope.record">下载</a>
          <a-divider type="vertical"></a-divider>
          <a @click="scope.record">详情</a>
          <a @click="show(scope)">详情</a>
        </template>
      </advance-table>
      <a-modal
@@ -84,6 +87,14 @@
        :width="500">
        <submit-form :title="title" v-if="isReload" :list="subList" @success="successSubmit" @cancel="cancelSubmit"></submit-form>
      </a-modal>
      <a-modal
          v-model="workDetailVisible"
          title="详情"
          centered
          :footer="false"
          :width="1300">
        <draw-upload :list="subListDetail" no-footer></draw-upload>
      </a-modal>
    </div>
  </page-toggle-transition>
</template>
@@ -96,6 +107,9 @@
import DrawUpload from "@/pages/components/drawUpload/DrawUpload";
import {zipParse} from "./apis";
import SubmitForm from "@/pages/workplace/workForm/SubmitForm";
import {linkInfo, myListPage} from "@/pages/workplace/apis";
import const_job_status from "@/assets/js/const/const_job_status";
import getItemByKey from "@/assets/js/tools/getItemByKey";
export default {
  name: "MyDraw",
@@ -117,6 +131,7 @@
      loading: false,
      drawUploadVisible: false,
      submitFormVisible: false,
      workDetailVisible: false,
      page: 1,
      pageSize: 10,
      total: 5,
@@ -124,68 +139,35 @@
      title: "",
      columns: [
        {
          title: '图纸编码',
          dataIndex: 'name',
          key: 'name',
          align: "center",
          searchAble: true
        },
        {
          title: '图纸类型',
          dataIndex: 'type',
          key: 'type',
          align: "center",
          searchAble: true,
          dataType: 'select',
          search: {
            selectOptions: []
          }
        },
        {
          title: '上传人',
          dataIndex: 'uploadPeople',
          key: 'uploadPeople',
          align: "center",
          searchAble: true,
          dataType: 'select',
          search: {
            selectOptions: []
          }
        },
        {
          title: '上传日期',
          dataIndex: 'uploadDate',
          key: 'uploadDate',
          title: '工单标题',
          dataIndex: 'title',
          key: 'title',
          align: "center",
        },
        {
          title: '审批状态',
          dataIndex: 'approvalState',
          key: 'approvalState',
          title: '工单描述',
          dataIndex: 'description',
          key: 'description',
          align: "center",
          scopedSlots: {customRender: 'approvalState'},
        },
        {
          title: '审批人',
          dataIndex: 'auditPeople',
          key: 'auditPeople',
          title: '工单状态',
          dataIndex: 'jobStatus',
          key: 'jobStatus',
          align: "center",
          scopedSlots: {customRender: 'auditPeople'},
          scopedSlots: { customRender: 'jobStatus' }
        },
        {
          title: '审批建议',
          dataIndex: 'approvalSuggestion',
          key: 'approvalSuggestion',
          title: '创建日期',
          dataIndex: 'beginTime',
          key: 'beginTime',
          align: "center",
          scopedSlots: {customRender: 'approvalSuggestion'},
        },
        {
          title: '审批日期',
          dataIndex: 'auditDate',
          key: 'auditDate',
          dataType: 'date',
          title: '结束日期',
          dataIndex: 'endTime',
          key: 'endTime',
          align: "center",
          scopedSlots: {customRender: 'auditDate'},
        },
        {
          title: '操作',
@@ -199,11 +181,13 @@
      dataSource: [],
      fileList: [],
      subList: [],
      subListDetail: []
    }
  },
  methods: {
    show(scope) {
      console.log(scope);
      let record = scope.record;
      this.searchBomList(record.id);
    },
    onSearch(conditions, searchOptions) {
      this.page = 1
@@ -229,7 +213,18 @@
      this.searchData()
    },
    searchData() {
      console.log("查询后台返回参数");
      myListPage(this.page, this.pageSize).then(res=>{
        let rs = res.data;
        let data = [];
        if(rs.code == 1) {
          data = rs.data.list.map(item=>{
            item.statusInfo = getItemByKey(item.status, const_job_status)
            return item;
          });
        }
        this.total = rs.data.total;
        this.dataSource = data;
      });
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
@@ -279,7 +274,24 @@
    },
    cancelSubmit() {
      this.submitFormVisible = false;
    },
    searchBomList(id) {
      let loading = this.$layer.loading();
      linkInfo(id).then(res=>{
        this.$layer.close(loading);
        let rs = res.data;
        let rsData = rs.data;
        let data = [];
        if(rs.code == 1) {
          data = rsData.approvingBomList;
    }
        this.subListDetail = data;
        this.workDetailVisible = true;
      }).catch(error=>{
        console.log(error);
        this.$layer.close(loading);
      });
    },
  },
  computed: {
    ...mapState('setting', ['animate']),
@@ -287,6 +299,9 @@
      return this.drawUploadVisible || this.submitFormVisible?true:false;
    }
  },
  mounted() {
    this.searchData();
  }
}
</script>
src/pages/workplace/notApproved/NotApproved.vue
@@ -135,7 +135,6 @@
    searchData() {
      approvingListPage(this.page, this.pageSize).then(res=>{
        let rs = res.data;
        console.log(rs);
        let data = [];
        if(rs.code == 1) {
          data = rs.data.list.map(item=>{
src/pages/workplace/rejectedList/RejectedList.vue
src/pages/workplace/workForm/SubmitForm.vue
@@ -80,6 +80,7 @@
import {uploadDraw} from "@/pages/workplace/apis";
import const_work_level from "@/assets/js/const/const_work_level";
import getItemByKey from "@/assets/js/tools/getItemByKey";
import {mapState} from "vuex";
export default {
  name: "SubmitForm",
  props: {
@@ -132,7 +133,11 @@
      });
    },
    getUserByRoleId() {
      getUserByRoleId(1002).then(res=>{
      let id = 1002;
      if(this.roles[0].id == 1002) {
        id = 1003;
      }
      getUserByRoleId(id).then(res=>{
        let rs = res.data;
        let data = [];
        if(rs.code == 1 && rs.data) {
@@ -150,7 +155,11 @@
      this.$emit("cancel", this.list);
    }
  },
  computed: {
    ...mapState('account', ['roles']),
  },
  mounted() {
    console.log(this.roles);
    this.getUserByRoleId();
  }
}