新增vue-layer组件

longyvfengyun

2022-07-23 af3f26d874447c6e973f3749567dbb5af47ca73e

新增vue-layer组件

 package.json

@@ -30,6 +30,7 @@
    "viser-vue": "^2.4.8",
    "vue": "2.6.11",
    "vue-i18n": "^8.18.2",
    "vue-layer": "^1.2.5",
    "vue-pdf": "^4.3.0",
    "vue-router": "^3.3.4",
    "vuedraggable": "^2.23.2",

 src/main.js

@@ -11,6 +11,10 @@
import {initI18n} from '@/utils/i18n'
import bootstrap from '@/bootstrap'
import 'moment/locale/zh-cn'
import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css'

Vue.prototype.$layer = layer(Vue);

const router = initRouter(store.state.setting.asyncRoutes)
const i18n = initI18n('CN', 'US')

 src/pages/components/drawUpload/DrawUpload.vue

@@ -36,6 +36,9 @@
          </div>
        </template>
      </a-table>
      <div class="modal-footer">
        <a-button type="primary" @click="handleClick">提交审核</a-button>
      </div>
    </a-spin>
  </div>
</template>
@@ -179,6 +182,18 @@
        this.spinning = false;
        console.log(error);
      });
    },
    handleClick() {
      this.$confirm({
        title: '系统提示',
        content: '确认提交审批',
        okText: '确认',
        cancelText: '取消',
        onOk: ()=>{
        this.$emit('success', this.list);
        }
      });

    }
  },
  computed: {
@@ -213,4 +228,8 @@
.content-value {
  font-weight: bold;
}
.modal-footer {
  padding: 8px;
  text-align: right;
}
</style>

 src/pages/user/apis.js

@@ -3,7 +3,7 @@

/**
 * 查询所有用户信息
 * @returns 
 * @returns
 */
export const getAllUser = (params, data) => {
  return axios({
@@ -15,7 +15,7 @@
}
/**
 * 新增用户
 * @returns 
 * @returns
 */
export const addUser = (data) => {
  return axios({
@@ -29,7 +29,7 @@
}
/**
 * 删除用户
 * @returns 
 * @returns
 */
export const deleteUser = (id) => {
  return axios({
@@ -40,7 +40,7 @@
}
/**
 * 编辑用户信息
 * @returns 
 * @returns
 */
export const editUser = (data) => {
  return axios({
@@ -54,7 +54,7 @@
}
/**
 * 查询所有部门信息
 * @returns 
 * @returns
 */
export const getAllDepart = () => {
  return axios({
@@ -64,7 +64,7 @@
}
/**
 * 查询所有角色信息
 * @returns 
 * @returns
 */
export const getAllRole = () => {
  return axios({
@@ -74,7 +74,7 @@
}
/**
 * 清除人脸信息
 * @returns 
 * @returns
 */
export const deleteFace = (faceId) => {
  return axios({
@@ -85,7 +85,7 @@
}
/**
 * 修改用户密码
 * @returns 
 * @returns
 */
 export const changePwd = (oldSnId, newSnId) => {
  return axios({
@@ -96,4 +96,19 @@
      oldSnId: encodeURIComponent(formatPassword(oldSnId)),
    }
  })
}
}

/**
 * 根据用户角色的id查询所有的用户
 * @param roleId 角色id
 * @returns {AxiosPromise}
 */
export const getUserByRoleId = (roleId) => {
  return axios({
    method: "GET",
    url: "docUser/getUserByRoleId",
    params: {
      roleId
    }
  })
}

 src/pages/workplace/myDraw/MyDraw.vue

@@ -73,7 +73,16 @@
        centered
        :footer="false"
        :width="1300">
        <draw-upload :list="subList"></draw-upload>
        <draw-upload v-if="isReload" :list="subList" @success="showSubmit"></draw-upload>
      </a-modal>
      <a-modal
        v-model="submitFormVisible"
        title="图纸上传"
        centered
        :maskClosable="false"
        :footer="false"
        :width="500">
        <submit-form v-if="isReload" :list="subList" @cancel="cancelSubmit"></submit-form>
      </a-modal>
    </div>
  </page-toggle-transition>
@@ -86,6 +95,7 @@
import AStepItem from "@/components/tool/AStepItem";
import DrawUpload from "@/pages/components/drawUpload/DrawUpload";
import {excelParse, zipParse} from "./apis";
import SubmitForm from "@/pages/workplace/workForm/SubmitForm";

export default {
  name: "MyDraw",
@@ -96,6 +106,7 @@
    },
  },
  components: {
    SubmitForm,
    DrawUpload,
    AStepItem,
    PageToggleTransition,
@@ -105,6 +116,7 @@
    return {
      loading: false,
      drawUploadVisible: false,
      submitFormVisible: false,
      page: 1,
      pageSize: 10,
      total: 5,
@@ -232,11 +244,12 @@
    },
    uploadChange(data) {
      if(data.fileList.length == 1) {
        let loading = this.$layer.loading();
        const formData = new FormData();
        formData.append('file', data.file);
        zipParse(formData).then(res=>{
          this.$layer.close(loading);
          let rs = res.data;
          console.log(res);
          if(rs.code == 1 && rs.data) {
            this.subList = rs.data2;
            this.drawUploadVisible = true;
@@ -248,36 +261,27 @@
          // 清空上传文件
          this.fileList = [];
        }).catch(error=>{
          this.$layer.close(loading);
          console.log(error);
          // 清空上传文件
          this.fileList = [];
        });
      }
    },
    zipParse(data) {
      const formData = new FormData();
      formData.append('file', data.file);
      zipParse(formData).then(res=>{
        let rs = res.data;
        if(rs.code == 1 && rs.data) {
          this.subList = rs.data2;
          this.drawUploadVisible = true;
          this.$message.success(rs.msg);
        }else {
          this.$message.error(rs.msg);
        }

        // 清空上传文件
        this.fileList = [];
      }).catch(error=>{
        console.log(error);
        // 清空上传文件
        this.fileList = [];
      });
    showSubmit() {
      this.drawUploadVisible = false;
      this.submitFormVisible = true;
    },
    cancelSubmit() {
      this.submitFormVisible = false;
      this.drawUploadVisible = true;
    }
  },
  computed: {
    ...mapState('setting', ['animate']),
    isReload() {
      return this.drawUploadVisible || this.submitFormVisible?true:false;
    }
  },
}
</script>

 src/pages/workplace/workForm/SubmitForm.vue

New file
@@ -0,0 +1,159 @@
<template>
  <div>
    <a-form :form="form">
      <a-row :gutter="12">
        <a-col :span="24">
          <a-form-item label="工单标题">
            <a-input
                v-decorator="['title', { initialValue: '', rules: [{ required: true, message: '请输入工单标题!' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="审核人">
            <a-select
                show-search
                v-decorator="[
              'nextUserName',
              {
                initialValue: '',
                rules: [{ required: true, message: '请选择审核人' }]
              },
            ]"
                placeholder="请选择审核人">
              <a-select-option
                  v-for="(item, key) in userList" :key="'key'+key"
                  :value="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="工单等级">
            <a-select
                show-search
                v-decorator="[
                  'level',
                  {
                    initialValue: 3,
                    rules: [{ required: true, message: '请选择审核人' }]
                  },
                ]"
                placeholder="请选择工单等级">
              <a-select-option
                  v-for="(item, key) in levels" :key="'key'+key"
                  :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="图纸描述">
            <a-textarea
                v-decorator="[
                  'dealDesc',
                  {
                    initialValue: '',
                    rules: [{ required: false, message: '请输入图纸描述' }]
                  },
                ]"
                placeholder="请输入图纸描述" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="modal-footer">
      <a-button type="primary" @click="handleSubmit">
        确认审核
      </a-button>
      <a-button style="margin-left: 8px;" type="danger" @click="cancel">
        返回
      </a-button>
    </div>
  </div>
</template>

<script>
import {getUserByRoleId} from "@/pages/user/apis";

export default {
  name: "SubmitForm",
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'submitForm' }),
      userList: [],
      levels: [
        {
          label: "一级工单",
          value: 1,
        },
        {
          label: "二级工单",
          value: 2,
        },
        {
          label: "三级工单",
          value: 3,
        }
      ],
      formData: {
        title: "",            // 工单标题
        nextUser: "",         // 下一个处理人
        level: 3,            // 工单等级
        dealDesc: "",        // 提交人描述
        description: "",     // 工单描述
        approvingBomList: []  // 子物料
      },
    }
  },
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let data = {...this.formData, ...values};
          data.approvingBomList = this.list;
          console.log(data);
        }
      });
    },
    getUserByRoleId() {
      getUserByRoleId(1002).then(res=>{
        let rs = res.data;
        let data = [];
        if(rs.code == 1 && rs.data) {
          data = rs.data2.map(item=>{
            item.key = item.name;
            return item;
          });
        }
        this.userList = data;
      }).catch(error => {
        console.log(error);
      });
    },
    cancel() {
      this.$emit("cancel", this.list);
    }
  },
  mounted() {
    this.getUserByRoleId();
  }
}
</script>

<style scoped>
.modal-footer {
  padding-top: 8px;
  text-align: right;
}
</style>

 yarn.lock

@@ -10213,6 +10213,11 @@
  resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
  integrity sha1-zXwS8uF45vqiOw48/S97rJMF+Pw=

vue-layer@^1.2.5:
  version "1.2.5"
  resolved "https://registry.yarnpkg.com/vue-layer/-/vue-layer-1.2.5.tgz#2a6e66e9a506dd74eea4e51fca2bd9a516ec8ff0"
  integrity sha512-rwHFuOxvtuMCSZmWKvHeLF0VyVtzUvG248moXs/llECXXZ6vUvUBHW8REWhKL4Xje9TcyWzdUUBMF8c5BgSTag==

vue-loader@^15.7.1:
  version "15.9.3"
  resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1592902131010&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz#0de35d9e555d3ed53969516cac5ce25531299dda"