|
|
@@ -0,0 +1,225 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-select
|
|
|
+ class="select"
|
|
|
+ v-model="cardID"
|
|
|
+ placeholder=""
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in QRList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="main-wrap">
|
|
|
+ <div class="QRList">
|
|
|
+ <div class="QRItem" v-for="i in QRList" :key="i.part_no">
|
|
|
+ <img class="qrcode" :src="getComplateURL(i.imageUrl)" alt="" />
|
|
|
+ <!-- <div class="qrcode" ></div> -->
|
|
|
+ <div class="description">
|
|
|
+ <span class="title">{{ i.part_name }}</span>
|
|
|
+ <div class="content">
|
|
|
+ {{ i.part_no }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ class="mt5"
|
|
|
+ v-model="reamrk"
|
|
|
+ placeholder=""
|
|
|
+ size="normal"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { submitNodeForm } from "@/api/bpmprocess/runDialogApi";
|
|
|
+import input from "ant-design-vue/lib/input";
|
|
|
+export default {
|
|
|
+ name: "QRCode",
|
|
|
+ props: ["formData", "row"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //是否编辑
|
|
|
+ isEdit: false,
|
|
|
+ cardID: "",
|
|
|
+ reamrk: "",
|
|
|
+ QRList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //计算属性值
|
|
|
+ myFormData() {
|
|
|
+ //父组件传递过来的值
|
|
|
+ return this.formData;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ //监听
|
|
|
+ myFormData: {
|
|
|
+ handler(nval) {
|
|
|
+ console.log("myFormData", nval);
|
|
|
+ let { resultMap } = nval;
|
|
|
+ if (resultMap) {
|
|
|
+ this.getQRList(resultMap.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ // 获取完整的url
|
|
|
+ getComplateURL(url) {
|
|
|
+ return process.env.VUE_APP_BASE_API + url;
|
|
|
+ },
|
|
|
+ // 获取二维码列表
|
|
|
+ getQRList(data) {
|
|
|
+ if (data?.length) {
|
|
|
+ this.QRList = data.map((item) => {
|
|
|
+ let { imageUrl, part_name, part_no, description } = item.resultMap;
|
|
|
+ let { partNo, partName } = JSON.parse(description);
|
|
|
+ return {
|
|
|
+ imageUrl,
|
|
|
+ part_name: partName,
|
|
|
+ part_no: partNo,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //处理请求
|
|
|
+ async submitHandler() {
|
|
|
+ //获取父组件传递过来的数据
|
|
|
+ console.log(this.row);
|
|
|
+ //校验表单数据
|
|
|
+ let res = await this.$refs.form?.validate();
|
|
|
+ //校验通过
|
|
|
+ if (res) {
|
|
|
+ //放准备发给后端的数据
|
|
|
+ let payLoad = {};
|
|
|
+ let { taskProcessKey, taskNodeKey } = this.myFormData.resultMap;
|
|
|
+ //判断是否编辑
|
|
|
+ if (this.isEdit) {
|
|
|
+ //准备更新节点的数据
|
|
|
+ payLoad.updateCommonEntityList = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "quality_control_card_sub_card",
|
|
|
+ },
|
|
|
+ conditionMap: {
|
|
|
+ task_process_key: taskProcessKey,
|
|
|
+ task_node_key: taskNodeKey,
|
|
|
+ },
|
|
|
+ commMap: {
|
|
|
+ qualityControlCard: this.form.qualityControlCard,
|
|
|
+ cardNum: this.form.cardNum,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ //插入节点数据总不能被数据
|
|
|
+ payLoad.insertCommonEntityList = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "quality_control_card_sub_card",
|
|
|
+ },
|
|
|
+ addListMap: [
|
|
|
+ {
|
|
|
+ task_id: this.row.bepTaskPlanKey,
|
|
|
+ qualityControlCard: this.form.qualityControlCard,
|
|
|
+ cardNum: this.form.cardNum,
|
|
|
+ taskProcessKey: this.row.benTaskProcessKey,
|
|
|
+ taskNodeKey: this.row.benTaskNodeKey,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ //提交请求
|
|
|
+ submitNodeForm(payLoad).then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ this.$modal.msgSuccess("保存成功");
|
|
|
+ } else {
|
|
|
+ this.$modal.error("保存失败,请稍后再试");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //得到这个表单数据
|
|
|
+ async getFormData() {
|
|
|
+ let formData = {
|
|
|
+ flag: false,
|
|
|
+ msg: "",
|
|
|
+ };
|
|
|
+ try {
|
|
|
+ let valid = await this.$refs.form.validate();
|
|
|
+ if (valid) {
|
|
|
+ formData.flag = true;
|
|
|
+ formData.data = this.form;
|
|
|
+ return formData;
|
|
|
+ } else {
|
|
|
+ formData.msg = "表单校验异常,请规范填写表单数据";
|
|
|
+ return formData;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ formData.msg = "表单校验异常,请规范填写表单数据";
|
|
|
+ return formData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+/* ::v-deep .el-button {
|
|
|
+ background: rgb(123, 213, 195);
|
|
|
+ border: rgb(123, 213, 195);
|
|
|
+ float: right;
|
|
|
+} */
|
|
|
+::v-deep .select {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+.main-wrap {
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow: scroll;
|
|
|
+ max-height: 400px;
|
|
|
+ .QRList {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .QRItem {
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 30%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #aaa6a64d;
|
|
|
+ .qrcode {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ .description {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lph