1338 lines
45 KiB
Python
1338 lines
45 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<el-row :gutter="2">
|
||
<!--表格-->
|
||
<el-col :span="6">
|
||
<el-card>
|
||
<div
|
||
slot="header"
|
||
class="clearfix"
|
||
>
|
||
<span style="font-size: 16px; font-weight: 700">物料检验记录表</span>
|
||
</div>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
@click="handleCreate"
|
||
>
|
||
新增
|
||
</el-button>
|
||
<!--表格列表-->
|
||
<el-table
|
||
|
||
:data="recordformList.results"
|
||
border
|
||
fit
|
||
stripe
|
||
highlight-current-row
|
||
height="670"
|
||
v-el-height-adaptive-table="{ bottomOffset: 20 }"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<el-table-column type="index" width="50"/>
|
||
<el-table-column label="表名称">
|
||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="scope">
|
||
<el-link
|
||
v-if="checkPermission(['material_update'])"
|
||
@click="handleLook(scope)"
|
||
>查看
|
||
</el-link
|
||
>
|
||
<el-link
|
||
v-if="checkPermission(['material_update'])"
|
||
@click="handleEdit(scope)"
|
||
>编辑
|
||
</el-link
|
||
>
|
||
<el-link
|
||
v-if="checkPermission(['material_delete'])"
|
||
type="danger"
|
||
@click="handleDelete(scope)"
|
||
>删除
|
||
</el-link
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--新增、编辑记录表格-->
|
||
<el-dialog
|
||
:visible.sync="dialogVisible"
|
||
:close-on-click-modal="false"
|
||
:title="dialogType === 'edit' ? '编辑记录表格' : '新增记录表格'"
|
||
>
|
||
<el-form
|
||
ref="Forms"
|
||
:model="recordform"
|
||
label-width="80px"
|
||
label-position="right"
|
||
>
|
||
<el-form-item label="表格名称" prop="name">
|
||
<el-input v-model="recordform.name" placeholder="表格名称"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align: right">
|
||
<el-button type="danger" @click="dialogVisible = false"
|
||
>取消
|
||
</el-button>
|
||
<el-button type="primary" @click="recordformconfirm('Forms')"
|
||
>确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!--表格展示-->
|
||
<el-dialog
|
||
:visible.sync="dialogVisibleForm"
|
||
:close-on-click-modal="false"
|
||
:title="tableForm.name"
|
||
>
|
||
<customForm
|
||
:results="fieldList.results"
|
||
:hasPicture="hasPicture"
|
||
:formID="formID"
|
||
@formFunc="formFunc"
|
||
/>
|
||
<!--<el-form ref="Forms" label-width="100px" :model="checkForm">
|
||
<el-row>
|
||
<el-col
|
||
:span="12"
|
||
v-for="(item, $index) in fieldList.results"
|
||
v-show="filterBlock(item.parent,item.display_expression)"
|
||
:key="$index"
|
||
>
|
||
<!–<div v-if="item.field_type === 'img'">–>
|
||
<el-form-item v-if="item.field_type === 'string'" :label="item.field_name">
|
||
<el-input
|
||
v-model="checkForm[item.field_key]"
|
||
placeholder="请输入"
|
||
@input="keyChange(item.field_key)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'int'"
|
||
:label="item.field_name"
|
||
>
|
||
<el-input
|
||
v-model="checkForm[item.field_key]"
|
||
type="number"
|
||
placeholder="请输入"
|
||
@input="keyChange(item.field_key)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'float'"
|
||
:label="item.field_name"
|
||
>
|
||
<el-input
|
||
v-model="checkForm[item.field_key]"
|
||
type="number"
|
||
placeholder="请输入"
|
||
@input="keyChange(item.field_key)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'date'"
|
||
:label="item.field_name"
|
||
>
|
||
<el-date-picker
|
||
v-model="checkForm[item.field_key]"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
style="width: 100%"
|
||
@change="keyChange(item.field_key)"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'datetime'"
|
||
:label="item.field_name"
|
||
>
|
||
<el-date-picker
|
||
v-model="checkForm[item.field_key]"
|
||
type="datetime"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
style="width: 100%"
|
||
@change="keyChange(item.field_key)"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'select'"
|
||
:label="item.field_name"
|
||
>
|
||
<el-select
|
||
v-model="checkForm[item.field_key]"
|
||
style="width: 100%"
|
||
placeholder="请选择"
|
||
@change="keyChange(item.field_key)"
|
||
>
|
||
<el-option
|
||
v-for="item1 in item.field_choice"
|
||
:key="item1"
|
||
:label="item1"
|
||
:value="item1"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="item.field_type === 'selects'"
|
||
:label="item.field_name"
|
||
>
|
||
<el-select
|
||
v-model="checkForm[item.field_key]"
|
||
style="width: 100%"
|
||
multiple
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item1 in item.field_choice"
|
||
:key="item1"
|
||
:label="item1"
|
||
:value="item1"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row v-show="hasPicture">
|
||
<el-form-item label="图表">
|
||
<div>
|
||
<img id="canvasImg" src="./../../assets/glass.png" style="width:300px;height: 200px;display: none">
|
||
<div style="position: relative;display: flex">
|
||
<canvas id="canvas" width="300" height="200">
|
||
您的浏览器不支持绘图，请升级或更换浏览器！
|
||
</canvas>
|
||
<input type="text" value="" class="hide" id="txt" placeholder="请输入文字">
|
||
<textarea class="hide" id="word" cols="15" rows="5" placeholder="请输入文字" autofocus></textarea>
|
||
<input id="inputV" type="hidden" value="1">
|
||
<div class="canvasBtnWrap">
|
||
<div class="canvasBtn" @click="error1">标记</div>
|
||
<div class="canvasBtn" @click="word1()">文字</div>
|
||
<!–<button @click="restuya()">清除批注</button>–>
|
||
<div class="canvasBtn" @click="back()">回退</div>
|
||
<div class="canvasBtn" @click="saveTu()">保存</div>
|
||
</div>
|
||
<div id="res"></div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>-->
|
||
<div style="text-align: right">
|
||
<el-button type="primary" @click="judgeForm">
|
||
合格验证
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</el-card>
|
||
</el-col>
|
||
<!--表格字段-->
|
||
<el-col :span="18">
|
||
<el-card>
|
||
<div slot="header" class="clearfix">
|
||
<span style="font-size: 16px; font-weight: 300">记录字段</span>
|
||
</div>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
@click="handlefieldCreate"
|
||
>新增
|
||
</el-button
|
||
>
|
||
<!--表格字段列表-->
|
||
<el-table
|
||
:data="fieldList.results"
|
||
border
|
||
fit
|
||
stripe
|
||
highlight-current-row
|
||
height="670"
|
||
v-el-height-adaptive-table="{ bottomOffset: 20 }"
|
||
>
|
||
<el-table-column type="index" width="50"/>
|
||
<el-table-column label="字段名称">
|
||
<template slot-scope="scope">{{
|
||
scope.row.field_name
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="字段类型">
|
||
<template slot-scope="scope">{{
|
||
options_[scope.row.field_type]
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="字段标识">
|
||
<template slot-scope="scope">{{
|
||
scope.row.field_key
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
<!--
|
||
<el-table-column label="上限值">
|
||
<template slot-scope="scope">{{
|
||
scope.row.high_limit
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="上限规则">
|
||
<template slot-scope="scope">{{
|
||
highoptionss_[scope.row.high_rule]
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="下限值">
|
||
<template slot-scope="scope">{{
|
||
scope.row.low_limit
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="下限规则">
|
||
<template slot-scope="scope">
|
||
{{ lowoptionss_[scope.row.low_rule] }}</template
|
||
>
|
||
</el-table-column>
|
||
!-->
|
||
<el-table-column label="是否判定">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.need_judge == true">是</el-tag>
|
||
<el-tag v-else>否</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="scope">
|
||
<el-link
|
||
v-if="checkPermission(['material_update'])"
|
||
@click="handlefieldEdit(scope)"
|
||
>编辑
|
||
</el-link
|
||
>
|
||
<el-link
|
||
v-if="checkPermission(['material_delete'])"
|
||
type="danger"
|
||
@click="handlefieldDelete(scope)"
|
||
>删除
|
||
</el-link
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
v-show="fieldList.count > 0"
|
||
:total="fieldList.count"
|
||
:page.sync="listQueryfield.page"
|
||
:limit.sync="listQueryfield.page_size"
|
||
@pagination="fieldLists"
|
||
/>
|
||
<!--表格字段新增编辑-->
|
||
<el-dialog
|
||
:visible.sync="dialogVisible1"
|
||
:close-on-click-modal="false"
|
||
:title="dialogType1 === 'edit' ? '编辑表格字段' : '新增表格字段'"
|
||
>
|
||
<el-form
|
||
ref="Form"
|
||
:model="field"
|
||
label-width="100px"
|
||
label-position="right"
|
||
>
|
||
<el-form-item label="字段类型" prop="field_type">
|
||
<el-select
|
||
style="width: 100%"
|
||
v-model="field.field_type"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in fieldtypeoptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="字段标识" prop="field_key">
|
||
<el-input v-model="field.field_key" placeholder="字段标识" @input="checkValue"/>
|
||
</el-form-item>
|
||
<el-form-item label="字段名称" prop="field_name">
|
||
<el-input v-model="field.field_name" placeholder="字段名称"/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="选项"
|
||
v-show="
|
||
field.field_type == 'radio' ||
|
||
field.field_type == 'checkbox' ||
|
||
field.field_type == 'select' ||
|
||
field.field_type == 'selects'
|
||
"
|
||
>
|
||
<el-button @click.prevent="addDomain" style="border: none">
|
||
<i class="el-icon-circle-plus-outline"></i>
|
||
<span style="font-size: 14px">添加</span>
|
||
</el-button>
|
||
<el-row
|
||
v-for="(domain, $index) in field_choice"
|
||
:key="domain + $index"
|
||
style="margin-bottom: 10px"
|
||
>
|
||
<el-col :span="20">
|
||
<el-input
|
||
v-model="field_choice[$index]"
|
||
auto-complete="off"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col
|
||
:span="3"
|
||
style="text-align: center"
|
||
v-if="$index !== 0"
|
||
>
|
||
<i
|
||
class="el-icon-remove-outline"
|
||
@click.prevent="removeDomain($index, '1')"
|
||
style="color: red; font-size: 16px"
|
||
></i>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item label="字段父级">
|
||
<treeselect v-model="field.parent" :multiple="false" :options="treeDate" placeholder="字段父级"/>
|
||
</el-form-item>
|
||
<el-form-item label="是否需要判定" prop="need_judge">
|
||
<el-switch v-model="field.need_judge"></el-switch>
|
||
</el-form-item>
|
||
<!--
|
||
<el-form-item
|
||
label="上限值"
|
||
v-if="field.need_judge == true"
|
||
prop="high_limit"
|
||
>
|
||
<el-input-number
|
||
v-model="field.high_limit"
|
||
:precision="2"
|
||
:min="0"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="上限规则"
|
||
v-if="field.need_judge == true"
|
||
prop="high_rule"
|
||
>
|
||
<el-select
|
||
style="width: 100%"
|
||
v-model="field.high_rule"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in highoptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="下限值"
|
||
v-if="field.need_judge == true"
|
||
prop="low_limit"
|
||
>
|
||
<el-input-number
|
||
v-model="field.low_limit"
|
||
:precision="2"
|
||
:min="0"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="下限规则"
|
||
v-if="field.need_judge == true"
|
||
prop="low_rule"
|
||
>
|
||
<el-select
|
||
style="width: 100%"
|
||
v-model="field.low_rule"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in lowoptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
!-->
|
||
<el-form-item label="判定式" v-if="field.need_judge === true">
|
||
<el-input v-model="field.rule_expression" type="textarea"/>
|
||
</el-form-item>
|
||
<el-form-item label="展示表达式">
|
||
<el-input v-model="field.display_expression" type="textarea"/>
|
||
</el-form-item>
|
||
<el-form-item label="模板图片" v-if="field.field_type === 'draw'">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
:action="upUrl"
|
||
accept="image/jpeg, image/gif, image/png, image/bmp"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
:headers="upHeaders"
|
||
>
|
||
<img v-if="field.draw_template" :src="field.draw_template" class="avatar"/>
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"/>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="排序" prop="sort">
|
||
<el-input-number
|
||
v-model="field.sort"
|
||
:min="1"
|
||
placeholder="排序"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align: right">
|
||
<el-button type="danger" @click="dialogVisible1 = false"
|
||
>取消
|
||
</el-button
|
||
>
|
||
<el-button type="primary" @click="fieldconfirm('Form')"
|
||
>确认
|
||
</el-button
|
||
>
|
||
</div>
|
||
</el-dialog>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import customForm from '@/components/customForm/index'
|
||
import checkPermission from "@/utils/permission";
|
||
import {getEquipmentAll} from "@/api/equipment";
|
||
import vueJsonEditor from "vue-json-editor";
|
||
import {upUrl, upHeaders} from "@/api/file";
|
||
import {
|
||
getrecordformList,
|
||
createrecordform,
|
||
updaterecordform,
|
||
deleterecordform,
|
||
getrffieldList,
|
||
createrffield,
|
||
updaterffield,
|
||
deleterffield,
|
||
} from "@/api/mtm";
|
||
import {upFile} from "@/api/file";
|
||
import {genTree} from "@/utils";
|
||
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
||
import Treeselect from '@riophae/vue-treeselect'
|
||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||
|
||
const defaultstep = {
|
||
name: "",
|
||
number: "",
|
||
};
|
||
|
||
const defaultrecordform = {};
|
||
const defaultfield = {};
|
||
let preDrawAry = [];
|
||
export default {
|
||
components: {Pagination, vueJsonEditor, Treeselect, customForm},
|
||
data() {
|
||
return {
|
||
step: defaultstep,
|
||
stepList: [],
|
||
upHeaders: upHeaders(),
|
||
upUrl: upUrl(),
|
||
fileList: [],
|
||
hasPicture: true,
|
||
listLoading: true,
|
||
need_judge: false,
|
||
dialogVisibles: false,
|
||
dialogVisibleForm: false,
|
||
dialogTypes: "new",
|
||
field: {
|
||
field_type: "",
|
||
field_key: "",
|
||
field_name: "",
|
||
sort: "",
|
||
parent: "",
|
||
draw_template: "",//图片模板
|
||
field_choice: [""],
|
||
},
|
||
field_choice: [""],
|
||
options: [],
|
||
optio: [],
|
||
rule1: {
|
||
name: [{required: true, message: "请输入", trigger: "blur"}],
|
||
number: [{required: true, message: "请输入", trigger: "blur"}],
|
||
},
|
||
recordform: defaultrecordform,
|
||
dialogType: "new",
|
||
dialogVisible: false,
|
||
dialogType1: "new",
|
||
dialogVisible1: false,
|
||
tableForm: defaultrecordform,
|
||
checkForm: {
|
||
hhh: '',
|
||
},
|
||
listQueryrecordform: {
|
||
page: 1,
|
||
page_size: 20,
|
||
},
|
||
recordformList: {
|
||
count: 0,
|
||
},
|
||
fieldList: {
|
||
count: 0,
|
||
},
|
||
treeDate: [],
|
||
listQueryfield: {
|
||
page: 1,
|
||
page_size: 20,
|
||
},
|
||
highoptions: [
|
||
{value: 1, label: "<"},
|
||
{value: 2, label: "<="},
|
||
],
|
||
lowoptions: [
|
||
{value: 1, label: ">"},
|
||
{value: 2, label: ">="},
|
||
],
|
||
highoptionss_: {
|
||
1: "<",
|
||
2: "<=",
|
||
},
|
||
lowoptionss_: {
|
||
1: ">",
|
||
2: ">=",
|
||
},
|
||
options_: {
|
||
string: "文本",
|
||
int: "整数",
|
||
float: "小数",
|
||
date: "日期",
|
||
datetime: "日期时间",
|
||
select: "单选",
|
||
selects: "多选",
|
||
draw: "绘图模板",
|
||
},
|
||
fieldtypeoptions: [
|
||
{
|
||
value: "string",
|
||
label: "文本",
|
||
},
|
||
{
|
||
value: "int",
|
||
label: "整数",
|
||
},
|
||
{
|
||
value: "float",
|
||
label: "小数",
|
||
},
|
||
{
|
||
value: "date",
|
||
label: "日期",
|
||
},
|
||
{
|
||
value: "time",
|
||
label: "时间",
|
||
},
|
||
{
|
||
value: "datetime",
|
||
label: "日期时间",
|
||
},
|
||
{
|
||
value: "select",
|
||
label: "单选",
|
||
},
|
||
{
|
||
value: "selects",
|
||
label: "多选",
|
||
},
|
||
{
|
||
value: "draw",
|
||
label: "绘图模板",
|
||
},
|
||
],
|
||
typeoptions: [
|
||
{
|
||
value: 1,
|
||
label: "生产记录",
|
||
},
|
||
],
|
||
canvas: null,
|
||
ctx: null,
|
||
myCanvas_rect: null,
|
||
Txt: null,
|
||
word: null,
|
||
formID: 0,
|
||
widths: 0,
|
||
heights: 0,
|
||
lineW: 3,
|
||
colorF: "#e42343",
|
||
imgData: '',
|
||
canvasImg: '',
|
||
judgeList: [],
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
created() {
|
||
this.material = this.$route.params.id;
|
||
this.recordformLists();
|
||
},
|
||
methods: {
|
||
formFunc(value) {
|
||
this.dialogVisibleForm = value;
|
||
},
|
||
handleAvatarSuccess(res, file) {
|
||
this.field.draw_template = res.data.path;
|
||
},
|
||
beforeAvatarUpload(file) {
|
||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
if (!isLt2M) {
|
||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||
}
|
||
return isLt2M;
|
||
},
|
||
keyChange(key) {
|
||
let y = this.checkForm[key];
|
||
this.$set(this.checkForm, key, y);
|
||
this.fieldList.results = [...this.fieldList.results];
|
||
this.filterBlock();
|
||
},
|
||
filterBlock(parent, rule) {
|
||
let that = this;
|
||
if (parent !== '' && parent !== null && parent !== undefined) {
|
||
if (rule !== '' && rule !== null && rule !== undefined) {
|
||
let reg = /\{(.+?)\}/g;
|
||
//let str = rule.replace(temp,'').replace('$','');//=='有'
|
||
//let y = that.checkForm[key];
|
||
if (rule.indexOf('||') > -1 || rule.indexOf('&&') > -1) {
|
||
let tam = '', arr = [];
|
||
if (rule.indexOf('||') > -1) {
|
||
arr = rule.split('||');
|
||
} else {
|
||
arr = rule.split('&&');
|
||
}
|
||
for (let i = 0; i < arr.length; i++) {
|
||
//获取判断依据
|
||
let a = '';
|
||
a = arr[i].replace(/`/g, '');
|
||
a = '`' + a + '`';
|
||
let tem = a.match(reg)[0];
|
||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||
if (that.checkForm[ky]) {
|
||
//替换变量
|
||
a = a.replace(ky, 'yyy');
|
||
let yyy = "'" + that.checkForm[ky] + "'";
|
||
if (eval(eval(a))) {
|
||
tam += 'true';
|
||
} else {
|
||
tam += 'false';
|
||
}
|
||
} else {
|
||
tam += 'false';
|
||
}
|
||
}
|
||
let rea = true;
|
||
if (rule.indexOf('||') > -1) {
|
||
if (tam.indexOf('true') > -1) {
|
||
rea = true;
|
||
} else {
|
||
rea = false;
|
||
}
|
||
} else {
|
||
if (tam.indexOf('false') > -1) {
|
||
rea = false;
|
||
} else {
|
||
rea = true;
|
||
}
|
||
}
|
||
return rea;
|
||
} else {
|
||
let temp = rule.match(reg)[0];
|
||
let key = temp.replace(/\{|\}/g, '');//qipao
|
||
let a = rule.replace(key, 'yy');
|
||
a = a.replace(key, 'yy');
|
||
let yy = "'" + that.checkForm[key] + "'";
|
||
return eval(eval(a));
|
||
// return eval("'"+y+"'"+str);
|
||
}
|
||
debugger;
|
||
} else {
|
||
return false;
|
||
}
|
||
} else {
|
||
return true;
|
||
}
|
||
},
|
||
checkValue() {
|
||
this.field.field_key = this.field.field_key.replace(/[^a-zA-Z]/g, '');
|
||
},
|
||
//添加字段选项
|
||
addDomain() {
|
||
this.field_choice.push("");
|
||
},
|
||
//删除字段选项
|
||
removeDomain(index) {
|
||
this.field_choice.splice(index, 1);
|
||
},
|
||
handleLook(scope) {
|
||
let that = this;
|
||
that.tableForm = Object.assign({}, scope.row); // copy obj
|
||
that.formID = that.tableForm.id;
|
||
that.listQueryfield.form = that.formID;
|
||
getrffieldList(that.listQueryfield).then((response) => {
|
||
if (response.data) {
|
||
this.hasPicture = false;
|
||
that.fieldList = response.data;
|
||
let list = response.data.results;
|
||
let arr = list.filter(item => {
|
||
return item.field_type === 'draw'
|
||
});
|
||
that.judgeList = [];
|
||
let listJudge = list.filter(item => {
|
||
return item.need_judge === true;
|
||
});
|
||
listJudge.forEach(item => {
|
||
let obj = new Object();
|
||
obj = item;
|
||
obj.judge = false;
|
||
that.judgeList.push(obj)
|
||
});
|
||
if (arr.length > 0) {
|
||
this.hasPicture = true;
|
||
}
|
||
for (let i = 0; i < list.length; i++) {
|
||
let key = list[i].field_key;
|
||
that.checkForm[key] = '';
|
||
that.$set(that.checkForm, key, '')
|
||
}
|
||
that.dialogVisibleForm = true;
|
||
setTimeout(function () {
|
||
that.canvasInit();
|
||
}, 500);
|
||
}
|
||
});
|
||
that.fieldLists();
|
||
},
|
||
canvasInit() {
|
||
let that = this;
|
||
preDrawAry = [];
|
||
that.canvas = document.getElementById('canvas');
|
||
that.ctx = that.canvas.getContext('2d');
|
||
that.myCanvas_rect = that.canvas.getBoundingClientRect();
|
||
that.Txt = document.getElementById('txt');
|
||
that.word = document.getElementById('word');
|
||
that.widths = that.myCanvas_rect.width;
|
||
that.heights = that.myCanvas_rect.height;
|
||
setTimeout(function () {
|
||
that.draw();
|
||
}, 500);
|
||
},
|
||
checkPermission,
|
||
|
||
handleCurrentChange(row) {
|
||
this.formID = row.id;
|
||
this.fieldLists();
|
||
this.fieldLists1();
|
||
},
|
||
recordformLists() {
|
||
this.listQueryrecordform.material = this.material;
|
||
this.listQueryrecordform.type = 2;
|
||
getrecordformList(this.listQueryrecordform).then((response) => {
|
||
if (response.data) {
|
||
this.recordformList = response.data;
|
||
}
|
||
});
|
||
},
|
||
fieldLists() {
|
||
let that = this;
|
||
that.listQueryfield.form = that.formID;
|
||
getrffieldList(that.listQueryfield).then((response) => {
|
||
if (response.data) {
|
||
that.fieldList = response.data;
|
||
that.fieldList.results = [...that.fieldList.results]
|
||
}
|
||
});
|
||
},
|
||
fieldLists1() {
|
||
let params = new Object();
|
||
let that = this;
|
||
params.page = 0;
|
||
params.form = this.formID;
|
||
getrffieldList(params).then((response) => {
|
||
if (response.data) {
|
||
let data = response.data;
|
||
data.forEach(item => {
|
||
item.name = item.field_name;
|
||
});
|
||
that.treeDate = genTree(data);
|
||
}
|
||
});
|
||
},
|
||
draw() {
|
||
let canvasImg = document.getElementById("canvasImg");
|
||
canvasImg.style.width = '300px';
|
||
canvasImg.style.height = '200px';
|
||
this.ctx.drawImage(canvasImg, 0, 0, 300, 200);
|
||
},
|
||
// 叉号
|
||
error1() {
|
||
let canvas1 = document.getElementById('canvas');
|
||
let ctx1 = canvas1.getContext('2d');
|
||
this.Txt.style.display = "none";
|
||
document.getElementById('word').style.display = "none";
|
||
ctx1.closePath();
|
||
canvas1.onmousedown = function () {
|
||
this.imgData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
|
||
preDrawAry.push(this.imgData);
|
||
ctx1.beginPath();
|
||
ctx1.strokeStyle = "#e42343";
|
||
ctx1.lineWidth = "3";
|
||
ctx1.lineJoin = "round";
|
||
};
|
||
//鼠标按下的位置
|
||
canvas1.onmouseup = function (ev) {
|
||
let oldX = ev.offsetX;
|
||
let oldY = ev.offsetY;
|
||
ctx1.moveTo(oldX, oldY);
|
||
ctx1.lineTo(ev.offsetX + 10, ev.offsetY + 10);
|
||
ctx1.moveTo(ev.offsetX + 10, ev.offsetY);
|
||
ctx1.lineTo(ev.offsetX, ev.offsetY + 10);
|
||
ctx1.stroke();
|
||
};
|
||
this.ctx.closePath();
|
||
},
|
||
|
||
// 文字先写字
|
||
text() {
|
||
let canvas2 = document.getElementById('canvas');
|
||
let ctx2 = canvas2.getContext('2d');
|
||
let Txt2 = document.getElementById('txt');
|
||
Txt2.style.display = "block";
|
||
document.getElementById('word').style.display = "none";
|
||
ctx2.font = "16px Microsoft Yahei";
|
||
canvas2.onmousedown = function (ev) {
|
||
this.imgData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
|
||
preDrawAry.push(this.imgData);
|
||
var v = Txt2.value;
|
||
// console.log(v);
|
||
if (v != '') {
|
||
var oldX = ev.offsetX;
|
||
var oldY = ev.offsetY;
|
||
// console.log(oldX,oldY);
|
||
ctx2.moveTo(oldX, oldY);
|
||
canvas2.onmouseup = function () {
|
||
ctx2.fillStyle = this.colorF;
|
||
ctx2.fillText(v, oldX, oldY);
|
||
canvas2.TextAutoLine(v, canvas2, oldX, oldY, 20);
|
||
// Txt.value = "";
|
||
Txt2.style.display = "none";
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 文字
|
||
word1() {
|
||
let canvas3 = document.getElementById('canvas');
|
||
let ctx3 = canvas3.getContext('2d');
|
||
let Txt3 = document.getElementById('txt');
|
||
let word3 = document.getElementById('word');
|
||
Txt3.style.display = "none";
|
||
ctx3.font = "16px Microsoft Yahei";
|
||
canvas3.onmousedown = function () {
|
||
ctx3.closePath();
|
||
}
|
||
canvas3.onmouseup = function (ev) {
|
||
var inputV = document.getElementById('inputV').value;
|
||
if (inputV == 1) {
|
||
document.getElementById('word').focus();
|
||
// console.log(ev.offsetX,ev.offsetY);
|
||
var oldX = ev.offsetX;
|
||
var oldY = ev.offsetY;
|
||
word3.style.display = "block";
|
||
word3.style.left = oldX + 'px';
|
||
word3.style.top = oldY + 'px';
|
||
|
||
word3.onblur = function () {
|
||
let v = word3.value;
|
||
if (v != '' && v != ' ') {
|
||
this.imgData = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
|
||
let img = ctx3.getImageData(0, 0, canvas3.width, canvas3.height);
|
||
debugger;
|
||
preDrawAry.push(img);
|
||
ctx3.moveTo(oldX, oldY);
|
||
ctx3.fillStyle = "#e42343";
|
||
let lineWidth = 0;
|
||
let canvasWidth = canvas3.width;
|
||
let lastSubStrIndex = 0;
|
||
for (let i = 0; i < v.length; i++) {
|
||
lineWidth += ctx3.measureText(v[i]).width;
|
||
if (lineWidth > canvasWidth - oldX) {
|
||
ctx3.fillText(v.substring(lastSubStrIndex, i), oldX, (oldY + 10));
|
||
oldY += 20;
|
||
lineWidth = 0;
|
||
lastSubStrIndex = i;
|
||
}
|
||
if (i == v.length - 1) {
|
||
ctx3.fillText(v.substring(lastSubStrIndex, i + 1), oldX, (oldY + 10));
|
||
}
|
||
}
|
||
inputV = "2";
|
||
word3.value = "";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 文字过长超出换行toDataURL()
|
||
canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
|
||
let ctx = canvas.getContext("2d");
|
||
let lineWidth = 0;
|
||
let canvasWidth = canvas.width;
|
||
let lastSubStrIndex = 0;
|
||
for (let i = 0; i < str.length; i++) {
|
||
lineWidth += ctx.measureText(str[i]).width;
|
||
if (lineWidth > canvasWidth - initX) {
|
||
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
|
||
initY += lineHeight;
|
||
lineWidth = 0;
|
||
lastSubStrIndex = i;
|
||
}
|
||
if (i == str.length - 1) {
|
||
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
|
||
}
|
||
}
|
||
},
|
||
|
||
/* // 删除批注
|
||
restuya(){
|
||
this.word.style.display="none";
|
||
this.Txt.style.display="none";
|
||
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
|
||
window.location.reload();
|
||
},*/
|
||
|
||
// 撤销
|
||
back() {
|
||
this.word.style.display = "none";
|
||
this.Txt.style.display = "none";
|
||
if (preDrawAry.length > 0) {
|
||
var popData = preDrawAry.pop();
|
||
this.ctx.putImageData(popData, 0, 0);
|
||
}
|
||
},
|
||
|
||
// 回退一次
|
||
put() {
|
||
this.ctx.putImageData(this.imgData, 0, 0);
|
||
},
|
||
|
||
//保存
|
||
saveTu() {
|
||
let canvas = document.getElementById('canvas');
|
||
let image = new Image();
|
||
image = canvas.toDataURL('image/png');
|
||
this.canvasImg = image;
|
||
let file = this.base64ToFile(image);
|
||
let formData = new FormData();
|
||
formData.append('file', file);
|
||
upFile(formData).then((res) => {
|
||
debugger;
|
||
console.log(res);
|
||
debugger;
|
||
})
|
||
},
|
||
base64ToFile(baseUrl) {
|
||
let arr = baseUrl.split(',');
|
||
// let type = arr[0].match(/:(.*?);/)[1]; // 解锁图片类型
|
||
let bytes = atob(arr[1]); // 解码base64
|
||
let n = bytes.length;
|
||
let bufferArray = new Uint8Array(n);
|
||
while (n--) {
|
||
bufferArray[n] = bytes.charCodeAt(n);
|
||
}
|
||
// let fileOfBlob = new File([bufferArray], new Date()+'.jpg');
|
||
return new File([bufferArray], 'draw.jpg');
|
||
},
|
||
judgeForm() {
|
||
let that = this,
|
||
reg = /\{(.+?)\}/g,
|
||
judgeList = this.judgeList;
|
||
debugger;
|
||
console.log(judgeList);
|
||
for (let i = 0; i < judgeList.length; i++) {
|
||
let arr = [], str = '';
|
||
let item = judgeList[i].rule_expression.replace(/`/g, '');
|
||
if (item.indexOf('||') > -1) {
|
||
arr = item.split('||');
|
||
} else if (item.indexOf('&&') > -1) {
|
||
arr = item.split('&&');
|
||
} else {
|
||
arr.push(item);
|
||
}
|
||
debugger;
|
||
console.log(arr);
|
||
//对每个条件进行判定，如果符合，
|
||
for (let i = 0; i < arr.length; i++) {
|
||
//获取判断依据
|
||
let a = '`' + arr[i] + '`';
|
||
let tem = a.match(reg)[0];
|
||
let ky = tem.replace(/\{|\}/g, '');//qipao
|
||
debugger;
|
||
console.log(that.checkForm[ky]);
|
||
//有值时进行判断
|
||
if (that.checkForm[ky] !== '' && that.checkForm[ky] !== null && that.checkForm[ky] !== undefined) {
|
||
//替换变量
|
||
a = a.replace(ky, 'yyy');
|
||
let yyy = "'" + that.checkForm[ky] + "'";
|
||
debugger;
|
||
if (eval(eval(a))) {
|
||
str += 'true';
|
||
} else {
|
||
str += 'false';
|
||
}
|
||
}
|
||
}
|
||
debugger;
|
||
console.log(str);
|
||
if (str.indexOf('true') > -1) {
|
||
that.judgeList[i].judge = true;
|
||
} else {
|
||
that.judgeList[i].judge = false;
|
||
}
|
||
}
|
||
let real = that.judgeList.filter(item => {
|
||
return item.judge == true;
|
||
});
|
||
debugger;
|
||
console.log(that.judgeList);
|
||
console.log(real);
|
||
if (real.length > 0) {
|
||
alert("检验不合格！")
|
||
} else {
|
||
alert("检验合格！")
|
||
}
|
||
},
|
||
//新增记录表
|
||
handleCreate() {
|
||
this.recordform = Object.assign({}, defaultrecordform);
|
||
this.dialogType = "new";
|
||
this.dialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs["Forms"].clearValidate();
|
||
});
|
||
},
|
||
//新增字段
|
||
handlefieldCreate() {
|
||
this.field_choice = [""];
|
||
// this.field = Object.assign({}, defaultfield);
|
||
this.dialogType1 = "new";
|
||
this.dialogVisible1 = true;
|
||
this.$nextTick(() => {
|
||
this.$refs["Form"].clearValidate();
|
||
});
|
||
},
|
||
handleEdit(scope) {
|
||
this.recordform = Object.assign({}, scope.row); // copy obj
|
||
this.dialogType = "edit";
|
||
this.dialogVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs["Forms"].clearValidate();
|
||
});
|
||
},
|
||
handlefieldEdit(scope) {
|
||
this.field = Object.assign({}, scope.row); // copy obj
|
||
this.field_choice = this.field.field_choice;
|
||
this.dialogType1 = "edit";
|
||
this.dialogVisible1 = true;
|
||
this.$nextTick(() => {
|
||
this.$refs["Form"].clearValidate();
|
||
});
|
||
},
|
||
handleDelete(scope) {
|
||
this.$confirm("确认删除?", "警告", {
|
||
confirmButtonText: "确认",
|
||
cancelButtonText: "取消",
|
||
type: "error",
|
||
})
|
||
.then(async () => {
|
||
await deleterecordform(scope.row.id);
|
||
this.recordformLists();
|
||
this.$message.success("成功");
|
||
})
|
||
.catch((err) => {
|
||
console.error(err);
|
||
});
|
||
},
|
||
handlefieldDelete(scope) {
|
||
this.$confirm("确认删除?", "警告", {
|
||
confirmButtonText: "确认",
|
||
cancelButtonText: "取消",
|
||
type: "error",
|
||
})
|
||
.then(async () => {
|
||
await deleterffield(scope.row.id);
|
||
this.fieldLists();
|
||
this.fieldLists1();
|
||
this.$message.success("成功");
|
||
})
|
||
.catch((err) => {
|
||
console.error(err);
|
||
});
|
||
},
|
||
async recordformconfirm(form) {
|
||
this.$refs[form].validate((valid) => {
|
||
if (valid) {
|
||
const isEdit = this.dialogType === "edit";
|
||
if (isEdit) {
|
||
this.recordform.material = this.material;
|
||
this.recordform.type = 2;
|
||
updaterecordform(this.recordform.id, this.recordform).then(
|
||
(res) => {
|
||
if (res.code >= 200) {
|
||
this.recordformLists();
|
||
this.dialogVisible = false;
|
||
this.$message.success("成功");
|
||
}
|
||
}
|
||
);
|
||
} else {
|
||
this.recordform.material = this.material;
|
||
this.recordform.type = 2;
|
||
createrecordform(this.recordform).then((res) => {
|
||
if (res.code >= 200) {
|
||
this.recordformLists();
|
||
this.dialogVisible = false;
|
||
this.$message.success("成功");
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
async fieldconfirm(form) {
|
||
this.$refs[form].validate((valid) => {
|
||
if (valid) {
|
||
const isEdit = this.dialogType1 === "edit";
|
||
if (isEdit) {
|
||
this.field.form = this.formID;
|
||
this.field.field_choice = this.field_choice;
|
||
updaterffield(this.field.id, this.field).then((res) => {
|
||
if (res.code >= 200) {
|
||
this.fieldLists();
|
||
this.fieldLists1();
|
||
this.dialogVisible1 = false;
|
||
this.$message.success("成功");
|
||
}
|
||
});
|
||
} else {
|
||
this.field.form = this.formID;
|
||
this.field.field_choice = this.field_choice;
|
||
debugger;
|
||
console.log(this.field);
|
||
createrffield(this.field).then((res) => {
|
||
if (res.code >= 200) {
|
||
this.fieldLists();
|
||
this.fieldLists1();
|
||
this.dialogVisible1 = false;
|
||
this.$message.success("成功");
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.my-label {
|
||
background: #e1f3d8;
|
||
}
|
||
|
||
.my-content {
|
||
background: #fde2e2;
|
||
}
|
||
|
||
canvas {
|
||
border: 1px solid #000000;
|
||
cursor: crosshair;
|
||
}
|
||
|
||
.canvasBtnWrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 80px;
|
||
padding-left: 20px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.canvasBtn {
|
||
width: 70px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
border: 1px solid #aaaaaa;
|
||
text-align: center;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.hide {
|
||
display: none;
|
||
}
|
||
|
||
#txt {
|
||
position: absolute;
|
||
top: 1%;
|
||
left: 1%;
|
||
width: 150px;
|
||
height: 30px;
|
||
border: 1px solid #e42343;
|
||
}
|
||
|
||
#word {
|
||
position: absolute;
|
||
width: 150px;
|
||
height: 70px;
|
||
padding: 0 2px;
|
||
background: none;
|
||
color: #e42343;
|
||
border: 1px dashed #b9b9b9;
|
||
}
|
||
|
||
#word::-webkit-input-placeholder {
|
||
color: #e42343;
|
||
}
|
||
|
||
#word::-moz-placeholder {
|
||
color: #e42343;
|
||
}
|
||
|
||
#word::placeholder {
|
||
color: #e42343;
|
||
}
|
||
|
||
#res {
|
||
display: inline-block;
|
||
}
|
||
</style>
|