Skip to content

S
sensorConsult
Commit 7027b6b7 authored by zhanglw's avatar zhanglw
Browse files
Options

客户修改，批量禁用

parent a668db84
Show whitespace changes
Inline Side-by-side
Showing with 1005 additions and 229 deletions
src/views/backstage/customMgt/customTabulate/add.vue
View file @ 7027b6b7
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
:headers="uploadHeaders" :headers="uploadHeaders"
:limit="2" :limit="2"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:on-success="excelImported" :on-success="handleImported"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" :on-remove="handleRemove"
> >
...@@ -56,7 +56,6 @@ ...@@ -56,7 +56,6 @@
<img width="100%" :src="dialogImageUrl"> <img width="100%" :src="dialogImageUrl">
</el-dialog> </el-dialog>
</div> </div>
{{ formData.businessLicense }}
</el-form-item> </el-form-item>
<el-form-item label="统一社会信用代码：" class="form-cell" prop="unifiedSocialCreditCode"> <el-form-item label="统一社会信用代码：" class="form-cell" prop="unifiedSocialCreditCode">
<div class="cell-box"> <div class="cell-box">
...@@ -94,7 +93,7 @@ ...@@ -94,7 +93,7 @@
</el-form-item> </el-form-item>
<el-form-item label="成立日期：" class="form-cell" prop="establishmentDate"> <el-form-item label="成立日期：" class="form-cell" prop="establishmentDate">
<div class="cell-box"> <div class="cell-box">
<el-date-picker v-model="formData.establishmentDate" type="date" placeholder="请选择日期" /> <el-date-picker v-model="formData.establishmentDate" type="date" clearable placeholder="请选择日期" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="经营期限（年）：" class="form-cell" prop="operatingPeriod"> <el-form-item label="经营期限（年）：" class="form-cell" prop="operatingPeriod">
...@@ -104,7 +103,7 @@ ...@@ -104,7 +103,7 @@
</el-form-item> </el-form-item>
<el-form-item label="审核/年检日期：" class="form-cell" prop="annualInspectionDate"> <el-form-item label="审核/年检日期：" class="form-cell" prop="annualInspectionDate">
<div class="cell-box"> <div class="cell-box">
<el-date-picker v-model="formData.annualInspectionDate" type="date" placeholder="请选择日期" /> <el-date-picker v-model="formData.annualInspectionDate" type="date" clearable placeholder="请选择日期" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="企业类型：" class="form-cell" prop="enterpriseType"> <el-form-item label="企业类型：" class="form-cell" prop="enterpriseType">
...@@ -175,7 +174,7 @@ export default { ...@@ -175,7 +174,7 @@ export default {
dialogImageUrl: '', dialogImageUrl: '',
dialogImageVisible: false, dialogImageVisible: false,
visible: false, visible: false,
title: '客户信息', title: '添加客户信息详情',
provinceOpts: [], provinceOpts: [],
cityOpts: [], cityOpts: [],
countyOpts: [], countyOpts: [],
...@@ -246,13 +245,16 @@ export default { ...@@ -246,13 +245,16 @@ export default {
submitForm() { submitForm() {
this.$refs.formViewRef.validate((valid, obj) => { this.$refs.formViewRef.validate((valid, obj) => {
if (valid) { if (valid) {
console.log(this.formData)
HttpReq.backstageApi.addCustomer(this.formData).then((res) => { HttpReq.backstageApi.addCustomer(this.formData).then((res) => {
this.$notify({ this.$notify({
title: res.msg, title: res.msg,
type: 'success', type: 'success',
duration: 2500 duration: 2500
}) })
if (res.code === 200) {
this.cancelView()
this.$parent.loadData()
}
}) })
} else { } else {
this.$message({ this.$message({
...@@ -288,7 +290,7 @@ export default { ...@@ -288,7 +290,7 @@ export default {
this.dialogImageUrl = file.url this.dialogImageUrl = file.url
this.dialogImageVisible = true this.dialogImageVisible = true
}, },
excelImported(response, file, fileList) { handleImported(response, file, fileList) {
this.$nextTick(() => { this.$nextTick(() => {
const arr = this.formData.businessLicense ? this.formData.businessLicense.split(';') : [] const arr = this.formData.businessLicense ? this.formData.businessLicense.split(';') : []
arr.push(response.businessLicense) arr.push(response.businessLicense)
...@@ -347,6 +349,9 @@ export default { ...@@ -347,6 +349,9 @@ export default {
>>>.el-input.is-disabled .el-input__icon { >>>.el-input.is-disabled .el-input__icon {
cursor: text; cursor: text;
} }
>>>.el-icon-circle-check {
color: #13ce66;
}
//>>>.el-icon-arrow-up:before { //>>>.el-icon-arrow-up:before {
// content: ''; // content: '';
//} //}
......
src/views/backstage/customMgt/customTabulate/edit.vue 0 → 100644
View file @ 7027b6b7
<template>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="标识设置：" class="form-cell" prop="supplierLevel">
<div class="cell-box">
<el-radio-group v-model="formData.supplierLevel" size="mini">
<el-radio v-for="item in dict.supplier_rank" :key="item.value" :label="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</div>
</el-form-item>
<el-form-item label="企业名称：" class="form-cell" prop="enterpriseName">
<div class="cell-box">
<el-input v-model="formData.enterpriseName" placeholder="请输入企业名称" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业联系人：" class="form-cell" prop="enterpriseContactPerson">
<div class="cell-box">
<el-input v-model="formData.enterpriseContactPerson" placeholder="请输入联系人" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业联系人手机号：" class="form-cell" prop="enterpriseContactPersonPhone">
<div class="cell-box">
<el-input v-model="formData.enterpriseContactPersonPhone" placeholder="请输入手机号" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业地址：" class="form-cell" prop="enterpriseAddress">
<div class="cell-box">
<el-input v-model="formData.enterpriseAddress" placeholder="请输入地址" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业邮箱：" class="form-cell" prop="enterpriseEmail">
<div class="cell-box">
<el-input v-model="formData.enterpriseEmail" placeholder="请输入邮箱" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="营业执照：" class="form-cell" prop="businessLicense">
<div class="cell-box">
<ul class="el-upload-list el-upload-list--picture-card" style="float: left">
<li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
<img :src="imgSrcStart+'/businessLicense/'+item" class="el-upload-list__item-thumbnail">
<label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
<span class="el-upload-list__item-delete" @click="handleRemoveImg(item)"><i class="el-icon-delete" /></span>
</span>
</li>
</ul>
<el-dialog append-to-body :visible.sync="dialogImgVisible">
<img width="100%" :src="imgSrcStart+'/businessLicense/'+dialogImgUrl">
</el-dialog>
<el-upload
ref="uploadCom"
action="/api/bsw/users/updateBusinessLicense"
name="businessLicense"
list-type="picture-card"
:headers="uploadHeaders"
:limit="2"
:before-upload="handleProgress"
:on-exceed="handleExceed"
:on-success="handleImported"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog append-to-body :visible.sync="dialogImageVisible">
<img width="100%" :src="dialogImageUrl">
</el-dialog>
</div>
<div style="clear:both">{{ formData.businessLicense }}</div>
</el-form-item>
<el-form-item label="统一社会信用代码：" class="form-cell" prop="unifiedSocialCreditCode">
<div class="cell-box">
<el-input v-model="formData.unifiedSocialCreditCode" placeholder="请输入18位统一社会信用代码" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="纳税人识别号：" class="form-cell" prop="taxpayerIdentificationNumber">
<div class="cell-box">
<el-input v-model="formData.taxpayerIdentificationNumber" placeholder="请输入纳税人识别号" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="所属行业：" class="form-cell" prop="industry">
<div class="cell-box">
<el-select v-model="formData.industry" placeholder="无" class="cell-select">
<el-option v-for="item in dict.industry_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="登记机关：" class="form-cell" prop="registrationAuthority">
<div class="cell-box">
<el-input v-model="formData.registrationAuthority" placeholder="请输入登记机关" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="法定代表人：" class="form-cell" prop="legalRepresentative">
<div class="cell-box">
<el-input v-model="formData.legalRepresentative" placeholder="请输入法定代表人" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="经营状态：" class="form-cell" prop="businessStatus">
<div class="cell-box">
<el-select v-model="formData.businessStatus" placeholder="无" class="cell-select">
<el-option v-for="item in dict.business_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="成立日期：" class="form-cell" prop="establishmentDate">
<div class="cell-box">
<el-date-picker v-model="formData.establishmentDate" type="date" clearable placeholder="请选择日期" />
</div>
</el-form-item>
<el-form-item label="经营期限（年）：" class="form-cell" prop="operatingPeriod">
<div class="cell-box">
<el-input v-model="formData.operatingPeriod" type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="审核/年检日期：" class="form-cell" prop="annualInspectionDate">
<div class="cell-box">
<el-date-picker v-model="formData.annualInspectionDate" type="date" clearable placeholder="请选择日期" />
</div>
</el-form-item>
<el-form-item label="企业类型：" class="form-cell" prop="enterpriseType">
<div class="cell-box">
<el-select v-model="formData.enterpriseType" placeholder="无" class="cell-select">
<el-option v-for="item in dict.company_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="注册资本（万元）：" class="form-cell" prop="registeredCapital">
<div class="cell-box">
<el-input v-model="formData.registeredCapital" type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="注册地址：" class="form-cell">
<div class="cell-box">
<el-select v-model="formData.registeredAddressProvince" placeholder="省" style="width: 120px" @change="findAreaByCodeAndType(formData.registeredAddressProvince,2, 'cityOpts')">
<el-option v-for="item in provinceOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.registeredAddressCity" placeholder="市" style="width: 160px" @change="findAreaByCodeAndType(formData.registeredAddressCity,3, 'countyOpts')">
<el-option v-for="item in cityOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.registeredAddressArea" placeholder="区/县" style="width: 160px">
<el-option v-for="item in countyOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
</div>
<div class="cell-box">
<el-input v-model="formData.registeredAddressStreet" placeholder="详细地址（例如：和平路北大街106号）" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="经营范围：" class="form-cell" prop="businessScope">
<div class="cell-box">
<el-input v-model="formData.businessScope" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业介绍：" class="form-cell" prop="enterpriseIntroduction">
<div class="cell-box">
<el-input v-model="formData.enterpriseIntroduction" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="主营产品介绍：" class="form-cell" prop="mainProductsIntroduction">
<div class="cell-box">
<el-input v-model="formData.mainProductsIntroduction" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="业务范围：" class="form-cell" prop="businessScopeIntroduction">
<div class="cell-box">
<el-input v-model="formData.businessScopeIntroduction" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelView">取消</el-button>
<el-button type="primary" @click="submitForm()">保存</el-button>
</div>
</el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common.js'
export default {
dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],
data() {
return {
uploadHeaders: { 'Authorization': getToken() },
imgSrcStart: process.env.VUE_APP_BASE_API,
dialogImageUrl: '',
dialogImageVisible: false,
visible: false,
title: '编辑客户信息详情',
customerId: '',
imgList: [],
dialogImgUrl: '',
dialogImgVisible: false,
provinceOpts: [],
cityOpts: [],
countyOpts: [],
formData: {
annualInspectionDate: '', // 审核日期
businessLicense: '', // 营业执照的照片名称
businessScope: '', // 经营范围
businessScopeIntroduction: '', // 业务范围介绍
businessStatus: '', // 经营状态
enterpriseAddress: '', // 企业地址
enterpriseContactPerson: '', // 企业联系人
enterpriseContactPersonPhone: '', // 企业联系人手机号
enterpriseEmail: '', // 企业邮箱
enterpriseIntroduction: '', // 企业介绍
enterpriseName: '', // 企业名称
enterpriseType: '', // 企业类型
establishmentDate: '', // 成立日期
industry: '', // 所属行业
legalRepresentative: '', // 法定代表人
mainProductsIntroduction: '', // 主营产品介绍
operatingPeriod: '', // 经营期限
registeredAddressArea: '', // 注册地址-区
registeredAddressCity: '', // 注册地址-市
registeredAddressProvince: '', // 注册地址-省
registeredAddressStreet: '', // 注册地址-街道
registeredCapital: '', // 注册资本
registrationAuthority: '', // 登记机关
supplierLevel: '1', // 供应商级别
taxpayerIdentificationNumber: '', // 纳税人识别号
unifiedSocialCreditCode: '', // 统一社会信用代码
sysUserId: null
},
rules: {
enterpriseName: { required: true, message: '请填写企业名称', trigger: 'blur' },
enterpriseContactPerson: { required: true, message: '请填写企业联系人', trigger: 'blur' },
enterpriseContactPersonPhone: { required: true, message: '请填写企业联系人手机号', trigger: 'blur' },
enterpriseAddress: { required: true, message: '请填写企业地址', trigger: 'blur' },
businessLicense: { required: true, message: '请输上传营业执照', trigger: 'blur' },
unifiedSocialCreditCode: { required: true, message: '请填写统一社会信用代码', trigger: 'blur' },
industry: { required: true, message: '请选择所属行业', trigger: 'blur' },
registeredCapital: { required: true, message: '请填写注册资本', trigger: 'blur' },
enterpriseIntroduction: { required: true, message: '请填写企业介绍', trigger: 'blur' },
mainProductsIntroduction: { required: true, message: '请填写主营产品介绍', trigger: 'blur' },
businessScopeIntroduction: { required: true, message: '请填写业务范围介绍', trigger: 'blur' }
}
}
},
mounted() {
},
methods: {
showView() {
this.visible = true
},
hideView() {
this.$refs.uploadCom.clearFiles()
this.$refs.formViewRef.resetFields()
this.cityOpts = []
this.countyOpts = []
this.visible = false
},
cancelView() {
this.hideView()
},
submitForm() {
this.$refs.formViewRef.validate((valid, obj) => {
if (valid) {
HttpReq.backstageApi.updateCustomerDetail(this.formData).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
if (res.code === 200) {
this.cancelView()
this.$parent.loadData()
}
})
} else {
this.$message({
message: '表单信息有误，请核对无误后提交！',
type: 'error'
})
}
})
},
handleProgress(file) {
if (this.formData.businessLicense.split(';').length >= 2) {
this.$message({
message: '超出最大上传数量限制',
type: 'info'
})
return false
}
},
handleExceed() {
this.$message({
message: '超出最大上传数量限制',
type: 'info'
})
},
handleRemoveImg(item) {
this.imgList.splice(this.imgList.indexOf(item), 1)
const arr = this.formData.businessLicense.split(';')
arr.splice(arr.indexOf(item), 1)
this.formData.businessLicense = arr.join(';')
},
handleRemove(file, fileList) {
if (!file.response) {
return
}
HttpReq.backstageApi.deleteBusinessLicense({
businessLicense: file.response.businessLicense
}).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
const arr = this.formData.businessLicense.split(';')
arr.splice(arr.indexOf(file.response.businessLicense), 1)
this.formData.businessLicense = arr.join(';')
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogImageVisible = true
},
handleImported(response, file, fileList) {
this.$nextTick(() => {
const arr = this.formData.businessLicense ? this.formData.businessLicense.split(';') : []
arr.push(response.businessLicense)
this.formData.businessLicense = arr.join(';')
this.$notify({
title: '上传成功！',
type: 'success',
duration: 2500
})
})
},
findAreaByCodeAndType(code, type, optsName) {
switch (optsName) {
case 'provinceOpts':
case 'cityOpts':
this.formData.registeredAddressCity = null
this.formData.registeredAddressArea = null
break
case 'countyOpts':
this.formData.registeredAddressArea = null
}
this.findAreaQueryOnly(code, type, optsName)
},
findAreaQueryOnly(code, type, optsName) {
HttpReq.backstageApi.findAreaByCodeAndType({
code, type
}).then((res) => {
this[optsName] = res
})
},
loadData(customerId) {
this.customerId = customerId
this.findAreaQueryOnly(0, 1, 'provinceOpts')
HttpReq.backstageApi.queryCustomerDetail({ customerId }).then((res) => {
if (res.code === 200) {
this.formData = res.data
if (this.formData.businessLicense) {
this.imgList = this.formData.businessLicense.split(';')
}
this.findAreaQueryOnly(this.formData.registeredAddressProvince, 2, 'cityOpts')
this.findAreaQueryOnly(this.formData.registeredAddressCity, 3, 'countyOpts')
this.showView()
} else {
this.$message({
message: res.msg,
type: 'error'
})
}
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.cell-box {
min-width: 120px;
.cell-input {
width: 420px;
}
.cell-select {
width: 220px;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
//>>>.el-icon-arrow-up:before {
// content: '';
//}
}
</style>
src/views/backstage/customMgt/customTabulate/index.vue
View file @ 7027b6b7
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<el-input v-model="query.username" clearable placeholder="请输入用户名" style="width:150px;" /> <el-input v-model="query.userName" clearable placeholder="请输入用户名" style="width:150px;" />
<el-select v-model="query.area" clearable placeholder="请选择地区" style="width: 120px"> <el-select v-model="query.registeredAddressProvince" clearable placeholder="请选择地区" style="width: 120px">
<el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-input v-model="query.username" clearable placeholder="请输入企业名称" style="width:150px;" /> <el-input v-model="query.enterpriseName" clearable placeholder="请输入企业名称" style="width:150px;" />
<el-input v-model="query.username" clearable placeholder="请输入联系人" style="width:150px;" /> <el-input v-model="query.enterpriseContactPerson" clearable placeholder="请输入联系人" style="width:150px;" />
<el-input v-model="query.username" clearable placeholder="请输入联系电话" style="width:150px;" /> <el-input v-model="query.enterpriseContactPersonPhone" clearable placeholder="请输入联系电话" style="width:150px;" />
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px"> <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
<el-option v-for="item in dict.custom_status" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in dict.custom_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加客户</el-button> <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加客户</el-button>
</div> </div>
<div style="text-align: right"> <div style="text-align: right">
<el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(1)">批量激活</el-button> <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(true)">批量激活</el-button>
<el-button type="danger" icon="el-icon-help" :disabled="!multipleSelection.length" @click="batchOperate(0)">批量锁定</el-button> <el-button type="danger" icon="el-icon-help" :disabled="!multipleSelection.length" @click="batchOperate(false)">批量锁定</el-button>
</div> </div>
</div> </div>
<!-- 表格 --> <!-- 表格 -->
...@@ -30,14 +30,14 @@ ...@@ -30,14 +30,14 @@
<el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange"> <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column type="index" width="55" label="序号" :index="indexMethod" /> <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
<el-table-column prop="username" label="用户名" /> <el-table-column prop="userName" label="用户名" />
<el-table-column prop="area" label="区域" /> <el-table-column prop="registeredAddressProvince" label="区域" :formatter="(row, column, cellValue)=>{return dict.label.area_province[cellValue]}" />
<el-table-column prop="xxx" label="企业名称" /> <el-table-column prop="enterpriseName" label="企业名称" />
<el-table-column prop="xxx" label="联系人" /> <el-table-column prop="enterpriseContactPerson" label="联系人" />
<el-table-column prop="xxx" label="联系电话" /> <el-table-column prop="enterpriseContactPersonPhone" label="联系电话" />
<el-table-column label="状态" width="100"> <el-table-column label="状态" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ dict.label.custom_status[scope.row.status] }}</div> <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.custom_status[scope.row.status] }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="锁定/激活" align="center" width="100"> <el-table-column label="锁定/激活" align="center" width="100">
...@@ -45,30 +45,36 @@ ...@@ -45,30 +45,36 @@
<el-switch v-model="scope.row.enabled" :disabled="scope.row.status>2" active-color="#13ce66" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" /> <el-switch v-model="scope.row.enabled" :disabled="scope.row.status>2" active-color="#13ce66" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="xxx" label="注册时间" align="center" width="100" /> <el-table-column prop="createTime" label="注册时间" align="center" width="160" />
<el-table-column prop="xxx" label="操作" align="right" width="200"> <el-table-column label="操作" align="right" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip v-if="scope.row.status==='3'" content="审核"><el-button round plain type="warning" icon="el-icon-s-check" @click="toView(scope.row, true)" /></el-tooltip>
<el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip> <el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="审核"><el-button round plain type="warning" icon="el-icon-s-check" @click="toEdit(scope.row)" /></el-tooltip> <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toView(scope.row)" /></el-tooltip>
<el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" /> <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div> </div>
<add-view ref="addView" /> <add-page ref="addPage" />
<edit-page ref="editPage" />
<view-page ref="viewPage" />
</div> </div>
</template> </template>
<script> <script>
import { HttpReq } from '@/api/common.js'
import DateRangePicker from '@/components/DateRangePicker' import DateRangePicker from '@/components/DateRangePicker'
import AddView from './add' import addPage from './add'
import editPage from './edit'
import viewPage from './view'
export default { export default {
components: { DateRangePicker, AddView }, components: { DateRangePicker, addPage, editPage, viewPage },
dicts: ['user_status', 'custom_status', 'area_province'], dicts: ['user_status', 'custom_status', 'area_province'],
data() { data() {
return { return {
textColors: ['#ccc', '#32cd32', '#bba', '#000', '#f00'],
loading: false, loading: false,
page: 1, page: 1,
pageSize: 20, pageSize: 20,
...@@ -93,46 +99,71 @@ export default { ...@@ -93,46 +99,71 @@ export default {
this.multipleSelection = val this.multipleSelection = val
}, },
loadData() { loadData() {
var sort = 'id,desc' // 清除参数无值的情况
var param = { ...this.query } Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => {
param.page = this.page if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
param.pageSize = this.pageSize })
param.sort = sort HttpReq.backstageApi.queryCustomer({
this.tableData = [ page: this.page - 1,
{ username: '张三', area: '火星', status: 1, enabled: true, xxx: '2023-05-09' }, pageSize: this.pageSize,
{ username: '李四', area: '地球', status: 3, enabled: false, xxx: '2023-05-09' } ...this.query
] }).then((res) => {
this.total = 2 this.tableData = res.data.data
this.total = res.data.total
})
}, },
batchOperate(opt) { batchOperate(type) {
if (!this.multipleSelection.length) { if (!this.multipleSelection.length) {
return this.$message({ return this.$message({
message: '未选取数据', message: '未选取数据',
type: 'info' type: 'info'
}) })
} }
if (opt) { HttpReq.backstageApi.userEnableDisable({
console.log('启用', this.multipleSelection) ids: this.multipleSelection.map(item => { return item.sysUserId }),
} else { type: type
console.log('启用', this.multipleSelection) }).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
if (res.code === 200) {
this.loadData()
} }
})
}, },
changeEnabled(data, val) { changeEnabled(data, val) {
this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', { this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" 用户' + data.userName + '的账号, 是否继续？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
HttpReq.backstageApi.userEnableDisable({
ids: [data.sysUserId],
type: val
}).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
if (res.code === 200) {
this.loadData()
}
})
}).catch(() => { }).catch(() => {
data.enabled = !data.enabled data.enabled = !data.enabled
}) })
}, },
toAdd() { toAdd() {
this.$refs.addView.showView() this.$refs.addPage.showView()
}, },
toEdit(item) { toEdit(item) {
this.$refs.editPage.loadData(item.customerId)
},
toView(item, isReview) {
this.$refs.viewPage.loadData(item.customerId, isReview)
}, },
toSearch() { toSearch() {
this.page = 1 this.page = 1
......
src/views/backstage/customMgt/customTabulate/view.vue 0 → 100644
View file @ 7027b6b7
<template>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
<img v-if="stampImgSrc" :src="stampImgSrc" class="stamp-review">
<el-form ref="formViewRef" :model="formData" :status-icon="true" label-width="240px">
<el-form-item label="标识设置：" class="form-cell" prop="supplierLevel">
<div class="cell-box">
<el-select v-model="formData.supplierLevel" disabled placeholder="无" class="cell-select">
<el-option v-for="item in dict.supplier_rank" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="企业名称：" class="form-cell" prop="enterpriseName">
<div class="cell-box">
<el-input v-model="formData.enterpriseName" disabled placeholder="请输入企业名称" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业联系人：" class="form-cell" prop="enterpriseContactPerson">
<div class="cell-box">
<el-input v-model="formData.enterpriseContactPerson" disabled placeholder="请输入联系人" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业联系人手机号：" class="form-cell" prop="enterpriseContactPersonPhone">
<div class="cell-box">
<el-input v-model="formData.enterpriseContactPersonPhone" disabled placeholder="请输入手机号" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业地址：" class="form-cell" prop="enterpriseAddress">
<div class="cell-box">
<el-input v-model="formData.enterpriseAddress" disabled placeholder="请输入地址" class="cell-input" />
</div>
</el-form-item>
<el-form-item disabled label="企业邮箱：" class="form-cell" prop="enterpriseEmail">
<div class="cell-box">
<el-input v-model="formData.enterpriseEmail" disabled placeholder="请输入邮箱" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="营业执照：" class="form-cell" prop="businessLicense">
<div class="cell-box">
<ul class="el-upload-list el-upload-list--picture-card">
<li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
<img :src="imgSrcStart+'/businessLicense/'+item" class="el-upload-list__item-thumbnail">
<label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
</span>
</li>
</ul>
<el-dialog append-to-body :visible.sync="dialogImgVisible">
<img width="100%" :src="imgSrcStart+'/businessLicense/'+dialogImgUrl">
</el-dialog>
</div>
</el-form-item>
<el-form-item label="统一社会信用代码：" class="form-cell" prop="unifiedSocialCreditCode">
<div class="cell-box">
<el-input v-model="formData.unifiedSocialCreditCode" disabled placeholder="请输入18位统一社会信用代码" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="纳税人识别号：" class="form-cell" prop="taxpayerIdentificationNumber">
<div class="cell-box">
<el-input v-model="formData.taxpayerIdentificationNumber" disabled placeholder="请输入纳税人识别号" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="所属行业：" class="form-cell" prop="industry">
<div class="cell-box">
<el-select v-model="formData.industry" disabled placeholder="无" class="cell-select">
<el-option v-for="item in dict.industry_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="登记机关：" class="form-cell" prop="registrationAuthority">
<div class="cell-box">
<el-input v-model="formData.registrationAuthority" disabled placeholder="请输入登记机关" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="法定代表人：" class="form-cell" prop="legalRepresentative">
<div class="cell-box">
<el-input v-model="formData.legalRepresentative" disabled placeholder="请输入法定代表人" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="经营状态：" class="form-cell" prop="businessStatus">
<div class="cell-box">
<el-select v-model="formData.businessStatus" disabled placeholder="无" class="cell-select">
<el-option v-for="item in dict.business_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="成立日期：" class="form-cell" prop="establishmentDate">
<div class="cell-box">
<el-date-picker v-model="formData.establishmentDate" disabled type="date" clearable placeholder="请选择日期" />
</div>
</el-form-item>
<el-form-item label="经营期限（年）：" class="form-cell" prop="operatingPeriod">
<div class="cell-box">
<el-input v-model="formData.operatingPeriod" disabled type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="审核/年检日期：" class="form-cell" prop="annualInspectionDate">
<div class="cell-box">
<el-date-picker v-model="formData.annualInspectionDate" disabled type="date" clearable placeholder="请选择日期" />
</div>
</el-form-item>
<el-form-item label="企业类型：" class="form-cell" prop="enterpriseType">
<div class="cell-box">
<el-select v-model="formData.enterpriseType" disabled placeholder="无" class="cell-select">
<el-option v-for="item in dict.company_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item>
<el-form-item label="注册资本（万元）：" class="form-cell" prop="registeredCapital">
<div class="cell-box">
<el-input v-model="formData.registeredCapital" disabled type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="注册地址：" class="form-cell">
<div class="cell-box">
<el-select v-model="formData.registeredAddressProvince" disabled placeholder="省" style="width: 120px" @change="findAreaByCodeAndType(formData.registeredAddressProvince,2, 'cityOpts')">
<el-option v-for="item in provinceOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.registeredAddressCity" disabled placeholder="市" style="width: 160px" @change="findAreaByCodeAndType(formData.registeredAddressCity,3, 'countyOpts')">
<el-option v-for="item in cityOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.registeredAddressArea" disabled placeholder="区/县" style="width: 160px">
<el-option v-for="item in countyOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
</div>
<div class="cell-box">
<el-input v-model="formData.registeredAddressStreet" disabled placeholder="详细地址（例如：和平路北大街106号）" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="经营范围：" class="form-cell" prop="businessScope">
<div class="cell-box">
<div class="cell-textarea">{{ formData.businessScope }}</div>
</div>
</el-form-item>
<el-form-item label="企业介绍：" class="form-cell" prop="enterpriseIntroduction">
<div class="cell-box">
<div class="cell-textarea">{{ formData.enterpriseIntroduction }}</div>
</div>
</el-form-item>
<el-form-item label="主营产品介绍：" class="form-cell" prop="mainProductsIntroduction">
<div class="cell-box">
<div class="cell-textarea">{{ formData.mainProductsIntroduction }}</div>
</div>
</el-form-item>
<el-form-item label="业务范围：" class="form-cell" prop="businessScopeIntroduction">
<div class="cell-box">
<div class="cell-textarea">{{ formData.businessScopeIntroduction }}</div>
</div>
</el-form-item>
<el-form-item v-if="!isReview && formData.status!=='3'" label="审核意见：" class="form-cell">
<div class="cell-box">
<div class="cell-textarea">{{ formData.reviewContent }}</div>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button @click="cancelView">关闭</el-button>
<el-button v-if="isReview" type="primary" @click="submitForm(true)">通过</el-button>
<el-button v-if="isReview" type="primary" @click="reviewVisible=true">驳回</el-button>
</div>
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelReview" :visible="reviewVisible" title="审核意见" width="600px">
<el-form ref="formReviewRef" :model="formReview" :rules="rules" :status-icon="true" label-width="120px">
<el-form-item label="审核意见：" class="form-cell" prop="reviewContent">
<div class="cell-box">
<el-input v-model="formReview.reviewContent" type="textarea" placeholder="请输入审核意见" maxlength="100" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" style="width: 300px" />
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="submitForm(false)">提交</el-button>
</div>
</el-dialog>
</el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common.js'
import review_pass from '@/assets/images/review_pass.png'
import review_await from '@/assets/images/review_await.png'
import review_failed from '@/assets/images/review_failed.png'
export default {
dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'],
data() {
return {
uploadHeaders: { 'Authorization': getToken() },
stampImgSrc: '',
imgSrcStart: process.env.VUE_APP_BASE_API,
dialogImgUrl: '',
dialogImgVisible: false,
visible: false,
title: '客户信息详情',
customerId: '',
isReview: false,
imgList: [],
provinceOpts: [],
cityOpts: [],
countyOpts: [],
formData: {
annualInspectionDate: '', // 审核日期
businessLicense: '', // 营业执照的照片名称
businessScope: '', // 经营范围
businessScopeIntroduction: '', // 业务范围介绍
businessStatus: '', // 经营状态
enterpriseAddress: '', // 企业地址
enterpriseContactPerson: '', // 企业联系人
enterpriseContactPersonPhone: '', // 企业联系人手机号
enterpriseEmail: '', // 企业邮箱
enterpriseIntroduction: '', // 企业介绍
enterpriseName: '', // 企业名称
enterpriseType: '', // 企业类型
establishmentDate: '', // 成立日期
industry: '', // 所属行业
legalRepresentative: '', // 法定代表人
mainProductsIntroduction: '', // 主营产品介绍
operatingPeriod: '', // 经营期限
registeredAddressArea: '', // 注册地址-区
registeredAddressCity: '', // 注册地址-市
registeredAddressProvince: '', // 注册地址-省
registeredAddressStreet: '', // 注册地址-街道
registeredCapital: '', // 注册资本
registrationAuthority: '', // 登记机关
supplierLevel: '1', // 供应商级别
taxpayerIdentificationNumber: '', // 纳税人识别号
unifiedSocialCreditCode: '', // 统一社会信用代码
sysUserId: null
},
reviewVisible: false,
formReview: {
reviewContent: ''
},
rules: {
reviewContent: { required: true, message: '请填写审核意见', trigger: 'blur' }
}
}
},
mounted() {
this.$nextTick(() => {
})
},
methods: {
showView() {
this.visible = true
},
hideView() {
this.$refs.formViewRef.resetFields()
this.cityOpts = []
this.countyOpts = []
this.imgList = []
this.visible = false
},
cancelView() {
this.cancelReview()
this.hideView()
},
cancelReview() {
if (this.$refs.formReviewRef) {
this.$refs.formReviewRef.resetFields()
}
this.formReview.reviewContent = ''
this.reviewVisible = false
},
submitForm(isPass) {
if (isPass) {
this.formReview.reviewContent = '审核通过'
this.cancelView()
return
}
this.$refs.formReviewRef.validate((valid, obj) => {
if (valid) {
this.cancelView()
} else {
this.$message({
message: '表单信息有误，请核对无误后提交！',
type: 'error'
})
}
})
},
findAreaByCodeAndType(code, type, optsName, fn) {
HttpReq.backstageApi.findAreaByCodeAndType({
code, type
}).then((res) => {
this[optsName] = res
})
},
loadData(customerId, isReview) {
this.customerId = customerId
this.isReview = isReview
this.title = `${isReview ? '审核' : '查看'}客户信息详情`
this.findAreaByCodeAndType(0, 1, 'provinceOpts')
HttpReq.backstageApi.queryCustomerDetail({ customerId }).then((res) => {
if (res.code === 200) {
this.formData = res.data
if (this.formData.businessLicense) {
this.imgList = this.formData.businessLicense.split(';')
}
switch (this.formData.status) {
case '1': this.stampImgSrc = review_pass
break
case '3': this.stampImgSrc = review_await
break
case '4': this.stampImgSrc = review_failed
break
default: this.stampImgSrc = ''
}
this.findAreaByCodeAndType(this.formData.registeredAddressProvince, 2, 'cityOpts')
this.findAreaByCodeAndType(this.formData.registeredAddressCity, 3, 'countyOpts')
this.showView()
} else {
this.$message({
message: res.msg,
type: 'error'
})
}
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.stamp-review {
border-style: none;
position: absolute;
right: 15%;
top: 40%;
z-index: 99;
}
.cell-box {
min-width: 120px;
.cell-input {
width: 420px;
}
.cell-select {
width: 220px;
}
.cell-textarea {
min-height: 50px;
color: #777;
font-style: oblique;
font-size: 14px;
text-decoration: underline; //下划线
text-underline-offset: 5px; //下划线和文字间距
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
color: #777;
font-style: oblique;
font-size: 14px;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
>>>.el-icon-arrow-up:before {
content: '';
}
}
</style>
src/views/backstage/productMgt/productTabulate/add.vue
View file @ 7027b6b7
...@@ -2,144 +2,67 @@ ...@@ -2,144 +2,67 @@
<!-- 表单渲染 --> <!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px"> <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="标识设置：" class="form-cell" prop="rank"> <el-form-item label="产品名称：" class="form-cell" prop="productName">
<div class="cell-box"> <div class="cell-box">
<el-radio-group v-model="formData.rank" size="mini"> <el-input v-model="formData.productName" placeholder="请输入产品名称" class="cell-input" />
<el-radio v-for="item in dict.supplier_rank" :key="item.value" :label="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="企业名称：" class="form-cell" prop="name"> <el-form-item label="产品分类：" class="form-cell" style="margin: 0">
<div class="cell-box"> <div class="cell-box" style="display: flex">
<el-input v-model="formData.name" placeholder="请输入企业名称" class="cell-input" /> <el-form-item prop="productType">
</div> <el-select v-model="formData.productType" placeholder="产品大类" style="width: 120px" @change="changeProductType">
</el-form-item> <el-option v-for="item in dict.product_type" :key="item.id" :label="item.label" :value="item.value" />
<el-form-item label="企业联系人：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="请输入联系人" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业联系人手机号：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="请输入手机号" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业地址：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="请输入地址" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业邮箱：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="请输入邮箱" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="营业执照：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.picFileName" style="width:160px;" placeholder="请上传图片" disabled />
<input type="file" name="image" @change="excelImport($event)">
</div>
<el-image v-show="formData.picFileName" :src="formData.picFileName?imgSrcStart+'/businessLicense/'+formData.picFileName:''" :preview-src-list="[imgSrcStart+'/businessLicense/'+formData.picFileName]" style="width: 300px;">
<div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
</el-image>
</el-form-item>
<el-form-item label="统一社会信用代码：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="请输入18位统一社会信用代码" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="纳税人识别号：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="请输入纳税人识别号" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="所属行业：" class="form-cell" prop="hy">
<div class="cell-box">
<el-select v-model="formData.hy" placeholder="无" class="cell-select">
<el-option v-for="item in dict.industry_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div>
</el-form-item>
<el-form-item label="登记机关：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="请输入登记机关" class="cell-input" />
</div>
</el-form-item> </el-form-item>
<el-form-item label="法定代表人：" class="form-cell" prop="xxxxx"> <el-form-item prop="productSubType" style="margin-left: 5px">
<div class="cell-box"> <el-select v-model="formData.productSubType" placeholder="产品小类" style="width: 160px">
<el-input v-model="formData.xxxxx" placeholder="请输入法定代表人" class="cell-input" /> <el-option v-for="item in productSubTypeOpts" :key="item.id" :label="item.label" :value="item.value" />
</div>
</el-form-item>
<el-form-item label="经营状态：" class="form-cell" prop="zt">
<div class="cell-box">
<el-select v-model="formData.zt" placeholder="无" class="cell-select">
<el-option v-for="item in dict.business_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div>
</el-form-item>
<el-form-item label="成立日期：" class="form-cell" prop="zt">
<div class="cell-box">
<el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" />
</div>
</el-form-item>
<el-form-item label="经营期限：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.xxxxx" type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item> </el-form-item>
<el-form-item label="审核/年检日期：" class="form-cell" prop="zt">
<div class="cell-box">
<el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="企业类型：" class="form-cell" prop="lx"> <el-form-item label="产品属性：" class="form-cell">
<div class="cell-box"> <div class="cell-box" />
<el-select v-model="formData.lx" placeholder="无" class="cell-select">
<el-option v-for="item in dict.company_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</el-form-item> </el-form-item>
<el-form-item label="注册资本：" class="form-cell" prop="xxxxx"> <el-form-item label="产品价格区间（元）：" required class="form-cell" style="margin: 0">
<div class="cell-box"> <div class="cell-box" style="display: flex">
<el-input v-model="formData.xxxxx" type="number" placeholder="请输入数字" class="cell-input" /> <el-form-item prop="minPrice">
</div> <el-input v-model.number="formData.minPrice" placeholder="价格区间下限" class="cell-input" style="width: 180px" />
</el-form-item> </el-form-item>
<el-form-item label="注册地址：" class="form-cell" prop="lx"> <div style="width: 20px;text-align: center">~</div>
<div class="cell-box"> <el-form-item prop="maxPrice">
<el-select v-model="formData.province" placeholder="省" style="width: 120px" @change="findAreaByCodeAndType(formData.province,2, 'cityOpts')"> <el-input v-model.number="formData.maxPrice" placeholder="价格区间上限" class="cell-input" style="width: 180px" />
<el-option v-for="item in provinceOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.city" placeholder="市" style="width: 160px" @change="findAreaByCodeAndType(formData.city,3, 'countyOpts')">
<el-option v-for="item in cityOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
<el-select v-model="formData.county" placeholder="区/县" style="width: 160px">
<el-option v-for="item in countyOpts" :key="item.id" :label="item.name" :value="item.code" />
</el-select>
</div>
<div class="cell-box">
<el-input v-model="formData.xxxxx" placeholder="详细地址（例如：和平路北大街106号）" class="cell-input" />
</div>
</el-form-item> </el-form-item>
<el-form-item label="经营范围：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="企业介绍：" class="form-cell" prop="xxxxx">
<div class="cell-box">
<el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="主营产品：" class="form-cell" prop="xxxxx"> <el-form-item label="产品特点：" class="form-cell" prop="productFeature">
<div class="cell-box"> <div class="cell-box">
<el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" /> <el-tag
v-for="tag in productFeature"
:key="tag"
closable
size="small"
:type="tagTypes[formData.productType||0]"
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
<el-input
v-show="inputVisible"
ref="saveTagInput"
v-model="inputValue"
class="input-new-tag"
placeholder="请输入特点标签文本"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button v-show="!inputVisible && productFeature.length < 5" plain round :type="tagTypes[formData.productType||0]" class="button-new-tag" icon="el-icon-price-tag" @click="showInput">添加</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="业务范围：" class="form-cell" prop="xxxxx"> <el-form-item label="产品标题：" class="form-cell" prop="productTitle">
<div class="cell-box"> <div class="cell-box">
<el-input v-model="formData.textarea" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit resize="none" class="cell-input" /> <el-input v-model="formData.productTitle" placeholder="请输入产品名称" class="cell-input" />
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -153,42 +76,88 @@ ...@@ -153,42 +76,88 @@
import { HttpReq } from '@/api/common.js' import { HttpReq } from '@/api/common.js'
export default { export default {
dicts: ['industry_type', 'supplier_rank', 'company_type', 'business_status'], dicts: ['product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7'],
data() { data() {
const checkPrice = (rule, value, callback) => {
if (!Number.isInteger(value)) {
return callback(new Error('请输入数字值'))
}
setTimeout(() => {
if (this.formData.minPrice && value < this.formData.minPrice) {
return callback(new Error('区间值错误'))
}
if (this.formData.maxPrice && value > this.formData.maxPrice) {
return callback(new Error('区间值错误'))
}
return callback()
}, 500)
}
return { return {
imgSrcStart: process.env.VUE_APP_BASE_API, imgSrcStart: process.env.VUE_APP_BASE_API,
visible: false, visible: false,
title: '客户信息', tagTypes: ['', 'primary', 'success', 'warning', 'danger', 'info', 'info', 'info'],
provinceOpts: [], title: '产品信息详情',
cityOpts: [], productSubTypeOpts: [],
countyOpts: [], inputVisible: false,
inputValue: '',
productFeature: [], // 产品特点tag列表
formData: { formData: {
rank: '1',
picFileName: '', picFileName: '',
province: null, productName: '', // 产品名称
city: null, productType: null, // 产品大类
county: null, productSubType: null, // 产品小类
name: '' minPrice: null, // 价格区间-小
maxPrice: null, // 价格区间-大
productFeature: null, // 产品特点
productTitle: '', // 产品标题
rank: '1'
}, },
rules: { rules: {
name: { required: true, message: '请输入企业名称', trigger: 'blur' } productName: { required: true, message: '请输入产品名称', trigger: 'blur' },
productType: { required: true, message: '请选择产品分类', trigger: 'blur' },
minPrice: [
{ required: true, message: '请输入产品价格区间下限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
],
maxPrice: [
{ required: true, message: '请输入产品价格区间上限', trigger: 'blur' },
{ validator: checkPrice, trigger: 'blur' }
]
} }
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.findAreaByCodeAndType(0, 1, 'provinceOpts')
this.loadData() this.loadData()
}) })
}, },
methods: { methods: {
handleClose(tag) {
this.productFeature.splice(this.productFeature.indexOf(tag), 1)
this.formData.productFeature = this.productFeature.join(';')
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue && !this.productFeature.filter(item => { return item === inputValue }).length) {
this.productFeature.push(inputValue)
this.formData.productFeature = this.productFeature.join(';')
}
this.inputValue = ''
this.inputVisible = false
},
showView() { showView() {
this.visible = true this.visible = true
}, },
hideView() { hideView() {
this.$refs.formViewRef.resetFields() this.$refs.formViewRef.resetFields()
this.cityOpts = [] this.productSubTypeOpts = []
this.countyOpts = [] this.productFeature = []
this.visible = false this.visible = false
}, },
cancelView() { cancelView() {
...@@ -201,36 +170,9 @@ export default { ...@@ -201,36 +170,9 @@ export default {
} }
}) })
}, },
excelImport(event) { changeProductType() {
const file = event.target.files[0] this.formData.productSubType = null
const formData = new FormData() this.productSubTypeOpts = this.dict['product_type_' + this.formData.productType]
formData.append('businessLicense', file)
HttpReq.backstageApi.uploadBusinessLicense(formData).then((res) => {
this.$nextTick(() => {
this.formData.picFileName = res.businessLicense
this.$notify({
title: '上传成功！',
type: 'success',
duration: 2500
})
})
})
},
findAreaByCodeAndType(code, type, optsName) {
switch (optsName) {
case 'provinceOpts':
case 'cityOpts':
this.formData.city = null
this.formData.county = null
break
case 'countyOpts':
this.formData.county = null
}
HttpReq.backstageApi.findAreaByCodeAndType({
code, type
}).then((res) => {
this[optsName] = res
})
}, },
loadData() { loadData() {
...@@ -248,6 +190,21 @@ export default { ...@@ -248,6 +190,21 @@ export default {
.cell-select { .cell-select {
width: 220px; width: 220px;
} }
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 28px;
line-height: 24px;
padding: 0 8px;
}
.input-new-tag {
width: 140px;
height: 28px;
margin-left: 10px;
vertical-align: bottom;
}
>>>.el-input__inner { >>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1); border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2); border-bottom: 1px solid rgba(100, 100, 100, 0.2);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment