打印机配置页面

Houjie

3 天以前 aeebddd7eca7d1432524943c0ce7df3e33f35705

打印机配置页面

 src/views/base/PrinterConfigList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,328 @@
<template>
  <a-card
    :bordered="false"
  >
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form
        layout="inline"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="30">

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="打印机IP">
              <j-input
                placeholder="请输入打印机IP检索"
                v-model="queryParam.printerIp "
              ></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button
        @click="handleAdd"
        type="primary"
        icon="plus"
      >新增
      </a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        filterMultiple="filterMultiple"
        :columns="columns"
        :rowClassName="tableRowClass"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <!--状态栏个性展示-->
        <span
          slot="status"
          slot-scope="text,record"
        >
          <a-badge
            v-if="record.printerStatus==1"
            status="success"
          />
          <span
            v-if="record.printerStatus==1"
            class="success"
          >启用</span>
          <a-badge
            v-if="record.printerStatus==0"
            status="error"
          />
          <span
            v-if="record.printerStatus==0"
            class="error"
          >禁用</span>
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            href="javascript:;"
            @click="handleEdit(record)"
          >编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
               <a-menu-item v-if="record.printerStatus == 0">
                <a-popconfirm
                  title="确定启用吗?"
                  @confirm="() => handleActive(record.id)"
                >
                  <a>启用</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-if="record.printerStatus == 1">
                <a-popconfirm
                  title="确定禁用吗?"
                  @confirm="() => handleActive(record.id)"
                >
                  <a>禁用</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleDelete(record.id)"
                >
                  <a>删除</a>
                </a-popconfirm>

              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- è¡¨å•åŒºåŸŸ -->
    <printer-config-model
      ref="modalForm"
      @ok="modalFormOk"
    ></printer-config-model>
  </a-card>
</template>

<script>
//按需引入 ç»„件
import PrinterConfigModel from './modules/printerConfig/PrinterConfigModel'

import { getAction, requestPut } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import JInput from '@/components/jeecg/JInput'

export default {
  name: 'PrinterConfigList',
  mixins: [JeecgListMixin],
  components: {
    PrinterConfigModel,
    JEllipsis,
    JInput
  },
  data() {
    return {
      dataSource: [],
      /* åˆ†é¡µå‚æ•° */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' å…±' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* æŽ’序参数 */
      isorter:{
        column: 'printerIp',
        order: 'asc',
      },
      // è¡¨å¤´
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '打印机IP',
          align: 'center',
          dataIndex: 'printerIp'
        },
        {
          title: '打印机名称',
          align: 'center',
          dataIndex: 'printerName'
        },
        {
          title: '打印机端口',
          align: 'center',
          dataIndex: 'portNumber'
        },
        {
          title: '打印机型号',
          align: 'center',
          dataIndex: 'printerModel'
        },
        {
          width: 100,
          title: '状态',
          align: 'center',
          scopedSlots: {
            customRender: 'status'
          },
          dataIndex: 'printerStatus'
        },
        {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/base/printerConfig/list',
        delete: '/base/printerConfig/delete',
        active: '/base/printerConfig/active'
      }
    }
  },
  mounted() {

  },
  methods: {
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    //禁用状态样式
    tableRowClass(record, index) {
      if (record.printerStatus != '1') {
        return 'frozenRowClass'
      }
      return ''
    },
    //启用禁用
    handleActive(id) {
      if (!this.url.active) {
        this.$message.error('请设置url.active!')
        return
      }
      let that = this
      requestPut(that.url.active, {}, { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    }
  }

}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

.frozenRowClass {
  color: #c9c9c9;
}

.success {
  color: green;
}

.error {
  color: red;
}

.fontweight {
  font-weight: bold;
}

.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px;
}

/deep/ .ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}
</style>

 src/views/base/modules/printerConfig/PrinterConfigModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,249 @@
<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="打印机IP"
            >
              <a-input
                :disabled="disableSubmit"
                allow-clear
                placeholder="请输入打印机IP"
                v-decorator="['printerIp', validatorRules.printerIp]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="打印机名称"
            >
              <a-input
                :disabled="disableSubmit"
                allow-clear
                placeholder="请输入打印机端口"
                v-decorator="['printerName', validatorRules.printerName]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="打印机端口"
            >
              <a-input
                :disabled="disableSubmit"
                allow-clear
                placeholder="请输入打印机端口"
                v-decorator="['portNumber', validatorRules.portNumber]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="打印机型号"
            >
              <a-input
                :disabled="disableSubmit"
                allow-clear
                placeholder="请输入打印机型号"
                v-decorator="['printerModel', validatorRules.printerModel]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import { duplicateCheck } from '@/api/api' //重复校验

export default {
  name: 'PrinterConfigModel',
  components: {},
  data() {
    return {
      title: '操作',
      visible: false,
      disableSubmit: false,
      model: {},
      treeData: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        printerIp: {
          rules: [
            { required: true, message: '请输入打印机IP' },
            { min: 2, max: 30, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur' },
          ]
        },
        printerName: {
          rules: [
            { required: true, message: '请输入打印机名称' },
            { min: 2, max: 30, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur' },
          ]
        },
        portNumber: {
          rules: [
            { required: true, message: '请输入打印机端口' },
            { min: 0, max: 64, message: '长度不超过 64 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateName }
          ]
        },

        printerModel: {
          rules: [
            { required: true, message: '请输入打印机型号' },
            { min: 0, max: 64, message: '长度不超过 64 ä¸ªå­—符', trigger: 'blur' }
          ]
        }
      },
      url: {
        add: '/base/printerConfig/add',
        edit: '/base/printerConfig/edit'
      },
      nextFactoryOptions: []
    }
  },


  created() {
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.warehouseId = record.id
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.model, 'printerIp','printerName', 'portNumber', 'printerModel')
        )
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      console.log('表单值:', this.form.getFieldsValue())
      const that = this
      // è§¦å‘表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },

    //验证 åç§°
    validateName(rule, value, callback) {
      var params = {
        tableName: 'base_printer_config',
        fieldName: 'port_number',
        fieldVal: value,
        //数据库中存在字段del_flag并使用该字段作为未删除策略，真删除：false å‡åˆ é™¤ï¼štrue
        delFlag: 'true'
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback('打印机端口已存在!')
        }
      })
    },
    // å…³é—­å¼¹çª—时清除表单校验
    removeValidate() {
      if (this.$refs.form) this.$refs.form.clearValidate()
    }
  }
}
</script>

<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>