1123 lines
29 KiB
Vue
1123 lines
29 KiB
Vue
<template>
|
||
<div class="addCloudPrint-container">
|
||
<div class="block-content block-content-set">
|
||
<div class="title">打印机设置</div>
|
||
<el-form
|
||
ref="formSet"
|
||
class="form-block"
|
||
:model="form"
|
||
label-width="120px"
|
||
:rules="rules"
|
||
>
|
||
<el-form-item label="打印机名称" prop="printer_name">
|
||
<el-input
|
||
v-model="form.printer_name"
|
||
:maxlength="20"
|
||
placeholder="请输入内容"
|
||
size="medium"
|
||
show-word-limit
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设备品牌" prop="model_id">
|
||
<el-select
|
||
size="medium"
|
||
v-model="form.model_id"
|
||
placeholder="请选择设备品牌"
|
||
@change="handerChangeType"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of options"
|
||
:key="index"
|
||
:label="item.model_name"
|
||
:value="item.model_id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="打印机编号" prop="printer_sn">
|
||
<el-input
|
||
v-model="form.printer_sn"
|
||
placeholder="请输入内容"
|
||
size="medium"
|
||
></el-input>
|
||
<label class="tips">
|
||
<label class="lable-name">
|
||
找不到设备编号？
|
||
<div class="lable-box">
|
||
<div class="img"></div>
|
||
</div>
|
||
</label>
|
||
</label>
|
||
</el-form-item>
|
||
<el-form-item label="打印机密钥" prop="printer_key">
|
||
<el-input
|
||
v-model="form.printer_key"
|
||
placeholder="请输入打印机密钥"
|
||
size="medium"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="URL" prop="website_url">
|
||
<el-input
|
||
v-model="form.website_url"
|
||
placeholder="http://open.10ss.net:8888"
|
||
size="medium"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="打印来源" class="form-activity-item" prop="flag">
|
||
<!-- <el-checkbox-group v-model="form.activityType">
|
||
<el-checkbox
|
||
class="el-item-checkbox"
|
||
label="收银台"
|
||
name="type"
|
||
></el-checkbox>
|
||
<el-checkbox
|
||
class="el-item-checkbox"
|
||
label="网店"
|
||
name="type"
|
||
></el-checkbox>
|
||
</el-checkbox-group> -->
|
||
<el-radio-group v-model="form.flag">
|
||
<el-radio
|
||
class="el-item-radio"
|
||
:label="item.region_id"
|
||
v-for="(item, index) of flagRadioGroup"
|
||
:key="index"
|
||
:disabled="item.status == 0"
|
||
>
|
||
{{ item.region }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="纸张宽度" class="form-page-size-item">
|
||
<el-radio-group v-model="form.paper_with">
|
||
<el-radio class="el-item-radio" :label="58">58mm</el-radio>
|
||
<el-radio class="el-item-radio" :label="80" :disabled="isDisabled">
|
||
80mm
|
||
</el-radio>
|
||
</el-radio-group>
|
||
<div class="page-tips">
|
||
80mm宽度仅支持“飞蛾打印机（新接口）”“芯烨云打印机”两种品牌。
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!--商品订单-->
|
||
<div class="block-content">
|
||
<div class="title">商品订单</div>
|
||
<el-table :data="tableOrderData" class="order-table" style="width: 100%">
|
||
<el-table-column
|
||
align="center"
|
||
prop="printTimingName"
|
||
label="打印时机"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="100px"
|
||
prop="state"
|
||
label="状态"
|
||
class-name="table-column-item"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.state"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="handerState(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
size="medium"
|
||
prop="tepOptions"
|
||
label="使用模板"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select
|
||
v-model="scope.row.tep"
|
||
placeholder="请选择小票模板"
|
||
@change="handleTepOptions(scope.row, scope.$index)"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of tepOptions"
|
||
:key="item.value + index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="300"
|
||
prop="printableItemTypesList"
|
||
label="可打印商品类型"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-checkbox-group
|
||
:true-label="1"
|
||
:false-label="2"
|
||
v-model="shopOrderCheckList[scope.$index]"
|
||
class="checkbox-groups"
|
||
>
|
||
<el-checkbox
|
||
v-for="(item, index) of printableItemTypeCheckGroup"
|
||
:key="index"
|
||
:label="item.label"
|
||
>
|
||
{{ item.name }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="orderLogisticsModeList"
|
||
label="实体、批发商品需打印的订单物流方式"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-checkbox-group
|
||
:true-label="1"
|
||
:false-label="0"
|
||
v-model="shopOrderModeCheckList[scope.$index]"
|
||
>
|
||
<el-checkbox
|
||
v-for="(item, index) of orderLogisticsModeCheckGroup"
|
||
:key="index"
|
||
:label="item.label"
|
||
>
|
||
{{ item.name }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printConnectionNum"
|
||
label="打印联数"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.unite" placeholder="请选择联数">
|
||
<el-option
|
||
v-for="(item, index) of uniteOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<span style="margin-left: 10px">联</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!--订单退款-->
|
||
<div class="block-content">
|
||
<div class="title">订单退款</div>
|
||
<el-table
|
||
:data="tableOrderRefundData"
|
||
class="order-table"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printTimingName"
|
||
label="打印时机"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="100px"
|
||
prop="state"
|
||
label="状态"
|
||
class-name="table-column-item"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.state"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="handerState(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
size="medium"
|
||
prop="tepOptions"
|
||
label="使用模板"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select
|
||
v-model="scope.row.tep"
|
||
placeholder="请选择小票模板"
|
||
@change="handleTepOptions(scope.row, scope.$index)"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of tepOptions"
|
||
:key="item.value + index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="300"
|
||
prop="printableItemTypesList"
|
||
label="可打印商品类型"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-checkbox-group
|
||
:true-label="1"
|
||
:false-label="2"
|
||
v-model="orderRefundCheckList[scope.$index]"
|
||
class="checkbox-groups"
|
||
>
|
||
<el-checkbox
|
||
v-for="(item, index) of printableItemTypeCheckGroup"
|
||
:key="index"
|
||
:label="item.label"
|
||
>
|
||
{{ item.name }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="orderLogisticsModeList"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printConnectionNum"
|
||
label="打印联数"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.unite" placeholder="请选择联数">
|
||
<el-option
|
||
v-for="(item, index) of uniteOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<span style="margin-left: 10px">联</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!--核销订单-->
|
||
<div class="block-content">
|
||
<div class="title">核销订单</div>
|
||
<el-table
|
||
:data="tableVerificationOrderData"
|
||
class="order-table"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printTimingName"
|
||
label="打印时机"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="100px"
|
||
prop="state"
|
||
label="状态"
|
||
class-name="table-column-item"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.state"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="handerState(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
size="medium"
|
||
prop="tepOptions"
|
||
label="使用模板"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select
|
||
v-model="scope.row.tep"
|
||
placeholder="请选择小票模板"
|
||
@change="handleTepOptions(scope.row, scope.$index)"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of tepOptions"
|
||
:key="item.value + index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="300"
|
||
prop="printableItemTypesList"
|
||
label="可打印商品类型"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-checkbox-group
|
||
:true-label="1"
|
||
:false-label="2"
|
||
v-model="verificationCheckList"
|
||
class="checkbox-groups"
|
||
>
|
||
<el-checkbox
|
||
v-for="(item, index) of verificationCheckGroup"
|
||
:key="index"
|
||
:label="item.label"
|
||
>
|
||
{{ item.name }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="orderLogisticsModeList"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printConnectionNum"
|
||
label="打印联数"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.unite" placeholder="请选择联数">
|
||
<el-option
|
||
v-for="(item, index) of uniteOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<span style="margin-left: 10px">联</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!--会员充值-->
|
||
<div class="block-content">
|
||
<div class="title">会员充值</div>
|
||
<el-table
|
||
:data="tableMemberRechargeData"
|
||
class="order-table"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printTimingName"
|
||
label="打印时机"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="100px"
|
||
prop="state"
|
||
label="状态"
|
||
class-name="table-column-item"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.state"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="handerState(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
size="medium"
|
||
prop="tepOptions"
|
||
label="使用模板"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select
|
||
v-model="scope.row.tep"
|
||
placeholder="请选择小票模板"
|
||
@change="handleTepOptions(scope.row, scope.$index)"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of tepOptions"
|
||
:key="item.value + index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="300"
|
||
prop="printableItemTypesList"
|
||
label=""
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="orderLogisticsModeList"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printConnectionNum"
|
||
label="打印联数"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.unite" placeholder="请选择联数">
|
||
<el-option
|
||
v-for="(item, index) of uniteOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<span style="margin-left: 10px">联</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!--收银交接班-->
|
||
<div class="block-content">
|
||
<div class="title">收银交接班</div>
|
||
<el-table
|
||
:data="tableCashierData"
|
||
class="order-table"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printTimingName"
|
||
label="打印时机"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="100px"
|
||
prop="state"
|
||
label="状态"
|
||
class-name="table-column-item"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.state"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="handerState(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
size="medium"
|
||
prop="tepOptions"
|
||
label="使用模板"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select
|
||
v-model="scope.row.tep"
|
||
placeholder="请选择小票模板"
|
||
@change="handleTepOptions(scope.row, scope.$index)"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) of tepOptions"
|
||
:key="item.value + index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="300"
|
||
prop="printableItemTypesList"
|
||
label=""
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="orderLogisticsModeList"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="printConnectionNum"
|
||
label="打印联数"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.unite" placeholder="请选择联数">
|
||
<el-option
|
||
v-for="(item, index) of uniteOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<span style="margin-left: 10px">联</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="footer">
|
||
<el-button class="btn" size="medium" @click="handerGoTo">取消</el-button>
|
||
<!-- <el-button class="btn" size="medium" @click="handerTestPrint">
|
||
测试打印
|
||
</el-button> -->
|
||
<el-button class="btn" size="medium" type="primary" @click="handerSubmit">
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getPrinterDetail,
|
||
getPrinterModelList,
|
||
getPrinterflagList,
|
||
addPrinter,
|
||
updatePrinterInfo,
|
||
testPrinter,
|
||
} from '@/api/printer/printer'
|
||
export default {
|
||
name: 'addCloudPrint',
|
||
data() {
|
||
return {
|
||
printer_id: null,
|
||
isDisabled: true,
|
||
rules: {
|
||
printer_name: [
|
||
{ required: true, message: '请输入打印机名称', trigger: 'blur' },
|
||
],
|
||
model_id: [
|
||
{ required: true, message: '请选择打印机品牌', trigger: 'change' },
|
||
],
|
||
printer_sn: [
|
||
{ required: true, message: '请输入打印机编号', trigger: 'blur' },
|
||
],
|
||
printer_key: [
|
||
{ required: true, message: '请输入打印机编号', trigger: 'blur' },
|
||
],
|
||
website_url: [
|
||
{ required: true, message: '请填写URL', trigger: 'blur' },
|
||
//{ pattern: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/, message: '请输入有效的网址', trigger: 'blur' }
|
||
],
|
||
},
|
||
options: [
|
||
{
|
||
model_id: 58,
|
||
model_name: '365云打印S2(编号kdt2)',
|
||
website_url: 'www.test.com',
|
||
},
|
||
],
|
||
form: {
|
||
printer_name: '',
|
||
model_id: null,
|
||
printer_sn: '',
|
||
printer_key: '',
|
||
website_url: '',
|
||
// activityType: [],
|
||
// tepOptions: [],
|
||
paper_with: 58,
|
||
flag: 1,
|
||
},
|
||
flagRadioGroup: [
|
||
{
|
||
region_id: 1,
|
||
region: '收银台',
|
||
status: 1,
|
||
},
|
||
],
|
||
printableItemTypeCheckGroup: [
|
||
{
|
||
label: 1,
|
||
name: '实体商品',
|
||
},
|
||
{
|
||
label: 2,
|
||
name: '虚拟商品',
|
||
},
|
||
{
|
||
label: 3,
|
||
name: '批发商品',
|
||
},
|
||
{
|
||
label: 4,
|
||
name: '预约到店',
|
||
},
|
||
{
|
||
label: 5,
|
||
name: '当面付',
|
||
},
|
||
],
|
||
orderLogisticsModeCheckGroup: [
|
||
{
|
||
label: 1,
|
||
name: '快递',
|
||
},
|
||
{
|
||
label: 2,
|
||
name: '自提',
|
||
},
|
||
{
|
||
label: 3,
|
||
name: '同城配送',
|
||
},
|
||
],
|
||
verificationCheckGroup: [
|
||
{
|
||
label: 1,
|
||
name: '自提订单',
|
||
},
|
||
{
|
||
label: 2,
|
||
name: '预约到店',
|
||
},
|
||
{
|
||
label: 3,
|
||
name: '优惠卷核销',
|
||
},
|
||
{
|
||
label: 4,
|
||
name: '礼包商品',
|
||
},
|
||
{
|
||
label: 5,
|
||
name: '酒店预订',
|
||
},
|
||
],
|
||
tepOptions: [
|
||
{
|
||
value: 1,
|
||
label: '黄金糕',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '黄金糕2',
|
||
},
|
||
],
|
||
shopOrderCheckList: [
|
||
[1, 2, 3, 4],
|
||
[1, 2, 3, 4],
|
||
],
|
||
shopOrderModeCheckList: [
|
||
[1, 2, 3, 4],
|
||
[1, 2, 3, 4],
|
||
],
|
||
orderRefundCheckList: [
|
||
[1, 2, 3, 4],
|
||
[1, 2, 3, 4],
|
||
[1, 2, 3, 4],
|
||
[1, 2, 3, 4],
|
||
],
|
||
verificationCheckList: [1, 2, 3, 4],
|
||
uniteOptions: [
|
||
{
|
||
value: 1,
|
||
label: 1,
|
||
},
|
||
{
|
||
value: 2,
|
||
label: 2,
|
||
},
|
||
{
|
||
value: 3,
|
||
label: 3,
|
||
},
|
||
{
|
||
value: 4,
|
||
label: 4,
|
||
},
|
||
],
|
||
tableOrderData: [
|
||
{
|
||
printTimingName: '付款后',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
{
|
||
printTimingName: '手动打印',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
],
|
||
tableOrderRefundData: [
|
||
{
|
||
printTimingName: '申请售后退款',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
{
|
||
printTimingName: '售后退款完成',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
{
|
||
printTimingName: '关闭订单并退款',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
{
|
||
printTimingName: '逐一退款',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
],
|
||
tableVerificationOrderData: [
|
||
{
|
||
printTimingName: '核销完成',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
],
|
||
tableMemberRechargeData: [
|
||
{
|
||
printTimingName: '会员充值成功',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
{
|
||
printTimingName: '后台手动充值',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
],
|
||
tableCashierData: [
|
||
{
|
||
printTimingName: '交接班成功',
|
||
state: 0,
|
||
tep: null,
|
||
unite: 1,
|
||
},
|
||
],
|
||
}
|
||
},
|
||
watch: {
|
||
// form: {
|
||
// handler(val) {
|
||
// if (val.paper_with == 80) {
|
||
// this.isDisabled = false
|
||
// } else {
|
||
// this.isDisabled = true
|
||
// }
|
||
// },
|
||
// deep: true,
|
||
// },
|
||
},
|
||
created() {
|
||
let id = this.$route.query.id
|
||
if (id) {
|
||
this.printer_id = id
|
||
this.getPrinterDetail()
|
||
}
|
||
this.getPrinterModelList()
|
||
this.getPrinterflagList()
|
||
},
|
||
methods: {
|
||
async getPrinterModelList() {
|
||
let res = await getPrinterModelList({ count: 99 })
|
||
if (res && res.status == 200) {
|
||
this.options = res.data
|
||
if (this.form.model_id) {
|
||
this.form.website_url = this.options[0].website_url
|
||
}
|
||
if (this.options[0].paper_with == 80) {
|
||
this.isDisabled = false
|
||
}
|
||
}
|
||
},
|
||
async getPrinterDetail() {
|
||
let res = await getPrinterDetail({ printer_id: this.printer_id })
|
||
if (res && res.status == 200) {
|
||
this.form = {
|
||
...this.form,
|
||
...res.data,
|
||
}
|
||
}
|
||
},
|
||
async getPrinterflagList() {
|
||
let res = await getPrinterflagList({ count: 99 })
|
||
if (res && res.status == 200) {
|
||
this.flagRadioGroup = res.data
|
||
}
|
||
},
|
||
handerChangeType(id) {
|
||
let item = this.options.find((item) => item.model_id == id)
|
||
if (item) {
|
||
this.form.website_url = item.website_url
|
||
|
||
if (item.paper_with == 58) {
|
||
this.isDisabled = true
|
||
} else {
|
||
this.isDisabled = false
|
||
}
|
||
}
|
||
},
|
||
handerState(item, index) {},
|
||
handerStoreCheckbox(index) {},
|
||
handleTepOptions(item, index) {},
|
||
async handerTestPrint() {
|
||
let res = testPrinter({ printer_id: '24' })
|
||
console.log("这是打印机",res);
|
||
},
|
||
handerGoTo() {
|
||
this.$router.push({
|
||
path: '/plotterManager',
|
||
})
|
||
},
|
||
async handerSubmit() {
|
||
let params = {
|
||
model_id: this.form.model_id,
|
||
printer_name: this.form.printer_name,
|
||
printer_sn: this.form.printer_sn,
|
||
printer_key: this.form.printer_key,
|
||
region_id: this.form.flag,
|
||
paper_with: this.form.paper_with,
|
||
website_url: this.form.website_url,
|
||
}
|
||
console.log(this.form)
|
||
|
||
if (this.printer_id) {
|
||
params = {
|
||
printer_id: this.form.printer_id,
|
||
...params,
|
||
}
|
||
}
|
||
|
||
this.$refs['formSet'].validate(async (valid) => {
|
||
if (valid) {
|
||
let res = this.printer_id
|
||
? await updatePrinterInfo(params)
|
||
: await addPrinter(params)
|
||
if (res && res.status == 200) {
|
||
this.$baseMessage(res.msg, 'success')
|
||
this.$router.push({ path: '/plotterManager' })
|
||
} else {
|
||
this.$baseMessage(res.msg, 'error')
|
||
}
|
||
}
|
||
|
||
// if (valid) {
|
||
// let isError = false
|
||
// let msg = ''
|
||
// this.tableOrderData.forEach((item, index) => {
|
||
// if (item.state == 1 && this.form.tepOptions[index] == null) {
|
||
// isError = true
|
||
// msg = '状态开启时请选择使用模板'
|
||
// }
|
||
// })
|
||
// if (isError) {
|
||
// this.$baseMessage(msg, 'error')
|
||
// }
|
||
// }
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" >
|
||
.addCloudPrint-container {
|
||
padding: 0 !important;
|
||
background: #f6f8f9 !important;
|
||
padding-bottom: 40px !important;
|
||
|
||
.title {
|
||
padding: 20px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
line-height: 1;
|
||
}
|
||
|
||
.table-item-title {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.block-content {
|
||
margin-bottom: 20px;
|
||
background: #fff;
|
||
|
||
.title {
|
||
color: #333;
|
||
}
|
||
|
||
&-set {
|
||
.el-input {
|
||
width: 415px;
|
||
height: 38px;
|
||
}
|
||
}
|
||
|
||
.form-block {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.order-table {
|
||
padding: 20px 10px;
|
||
|
||
tbody {
|
||
tr {
|
||
background: #fff;
|
||
}
|
||
|
||
td {
|
||
border-bottom: 10px solid #fff !important;
|
||
background: #f6f8f9;
|
||
padding: 20px 10px;
|
||
|
||
div {
|
||
background: #f6f8f9;
|
||
}
|
||
}
|
||
|
||
.el-table__cell:first-child {
|
||
div {
|
||
font-weight: bold !important;
|
||
color: #000 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.has-gutter {
|
||
th {
|
||
background: #fff;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.el-form-item__label {
|
||
padding: 0 15px 0 0 !important;
|
||
}
|
||
|
||
.tips {
|
||
margin-left: 10px;
|
||
color: #fb6638;
|
||
|
||
.lable-name {
|
||
position: relative;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
.lable-box {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
.lable-box {
|
||
position: absolute;
|
||
top: -50px;
|
||
left: 122px;
|
||
padding: 8px 16px;
|
||
width: 357px;
|
||
height: 132px;
|
||
background-color: #fff;
|
||
background-clip: padding-box;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease-out;
|
||
visibility: hidden;
|
||
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
width: 0px;
|
||
height: 0px;
|
||
border: 5px solid transparent;
|
||
border-right: 5px solid white;
|
||
position: relative;
|
||
top: -60%;
|
||
left: -26px;
|
||
}
|
||
|
||
.img {
|
||
position: relative;
|
||
background-image: url(../../../../assets/sn.png);
|
||
background-size: cover;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-activity-item,
|
||
.form-page-size-item {
|
||
.el-form-item__content {
|
||
margin-left: 123px !important;
|
||
}
|
||
}
|
||
|
||
.page-tips {
|
||
line-height: 20px;
|
||
margin-top: 8px;
|
||
color: #999;
|
||
}
|
||
|
||
.el-item-checkbox {
|
||
.el-checkbox__input {
|
||
transform: scale(130%);
|
||
}
|
||
}
|
||
|
||
.el-item-radio {
|
||
.el-radio__input {
|
||
transform: scale(130%);
|
||
}
|
||
|
||
.el-radio__inner {
|
||
background: #fff !important;
|
||
}
|
||
|
||
.el-radio__input.is-checked .el-radio__inner::after {
|
||
transform: translate(-50%, -50%) scale(1.2) !important;
|
||
background-color: #1890ff !important;
|
||
width: 5px !important;
|
||
height: 5px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.checkbox-groups {
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.footer {
|
||
position: fixed; /* 使用fixed定位 */
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 58px;
|
||
background: #fff;
|
||
color: white;
|
||
text-align: center;
|
||
z-index: 1;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10px 0;
|
||
|
||
.btn {
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|