yiyun-fe
/
yiyunjianzhu-vue
4
0
Çatalla 0
Kod Değişiklik İstekleri 0 Sürümler 0 Aktivite
Kaynağa Gözat

总后台 客户列表页面重构

dev
zhengzhou 4 yıl önce
ebeveyn
575fa9b07e
işleme
844f521cf4
4 değiştirilmiş dosya ile 815 ekleme ve 1638 silme
Görünümü Böl
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +0
    -39
      src/views/manage_company/user/components/card-header.vue
  2. +586
    -0
      src/views/manage_system/customer/components/company-detail.vue
  3. +79
    -0
      src/views/manage_system/customer/components/side-tree.vue
  4. +150
    -1599
      src/views/manage_system/customer/index.vue

+ 0
- 39
src/views/manage_company/user/components/card-header.vue Dosyayı Görüntüle

@@ -1,39 +0,0 @@
<template>
<div class="card-header">
<div v-if="hasLeft">
<slot name="left" />
</div>
<div class="title">
<slot name="title" />
</div>
<div>
<slot name="right" />
</div>
</div>
</template>


<script>
export default {
data() {
return {
hasLeft: false,
}
},
mounted() {
this.hasLeft = !!this.$slots.left;
}
}
</script>

<style lang="less" scoped>
.card-header {
display: flex;
justify-content: space-between;
height: 44px;
line-height: 44px;
.title {
font-size: 18px;
}
}
</style>

+ 586
- 0
src/views/manage_system/customer/components/company-detail.vue Dosyayı Görüntüle

@@ -0,0 +1,586 @@
<template>
<div class="company-node-view">
<card-header class="company-node-view-header">
<template #title>{{node.label}}</template>
<template #right>
<el-dropdown v-if="!editing">
<el-button size="small">企业管理</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<span
class="dropdown-button"
@click.stop="editing = true"
>编辑</span>
</el-dropdown-item>
<el-dropdown-item>
<span
class="dropdown-button"
@click.stop="toggleState"
>{{nodeDetailFormData.disable == 0 ? '禁用' : '启用'}}</span>
</el-dropdown-item>
<el-dropdown-item>
<span class="dropdown-button danger_button" @click.stop="deleteCompany">删除</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<template v-if="editing">
<el-button
size="small"
@click.stop="editing = false"
>取消</el-button>
<el-button
size="small"
type="primary"
@click.stop="updateCompanyInfo"
>保存</el-button>
</template>
</template>
</card-header>
<div class="company-node-view-body">
<el-form
ref="form"
:model="nodeDetailFormData"
:rules="companyRules"
:show-message="editing"
:hide-required-asterisk="!editing"
label-position="left"
label-width="100px"
>
<div class="form-subtitle">企业信息</div>
<div class="yiyunTable_list_item">
<div :class="el_formLabelcolor +' UserEditinfoBox DivInputHeight'">
<div class="node-form-field">
<el-form-item
label="企业简称："
prop="companyName"
>
<div v-if="editing == false">{{nodeDetailFormData.companyName}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.companyName"></el-input>
</div>
</el-form-item>
</div>
<!-- 2019-07-31 新加的 -->
<div class="node-form-field">
<el-form-item
label="企业全称："
prop="compAllName"
>
<div v-if="editing == false">{{nodeDetailFormData.compAllName}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.compAllName"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="所属省份："
prop="proviceName"
>
<div v-if="editing == false">{{nodeDetailFormData.proviceName}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-select
v-model="nodeDetailFormData.proviceID"
placeholder="请选择"
>
<el-option
v-for="item in proviceOptions"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item label="地址：">
<div v-if="editing == false">{{nodeDetailFormData.address}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.address"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="所属行业："
prop="industryName"
>
<div v-if="editing == false">{{nodeDetailFormData.industryName}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-select
v-model="nodeDetailFormData.industryID"
placeholder="请选择"
>
<el-option
v-for="item in industryOptions"
:key="item.industryID"
:label="item.name"
:value="item.industryID"
></el-option>
</el-select>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="单位电话："
prop="telphone"
>
<div v-if="editing == false">{{nodeDetailFormData.telphone}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.telphone"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="法人："
prop="cnName"
>
<div v-if="editing == false">{{nodeDetailFormData.cnName}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.cnName"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="性别："
prop="sex"
>
<div v-if="editing==false">
<div v-if="nodeDetailFormData.sex==1">帅哥</div>
<div v-if="nodeDetailFormData.sex==0">美女</div>
</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-radio-group v-model="nodeDetailFormData.sex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="手机号："
prop="phone"
>
<div v-if="editing == false">{{nodeDetailFormData.phone}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input
v-model="nodeDetailFormData.phone"
:disabled="!!nodeDetailFormData.companyID"
></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="邮箱："
prop="email"
>
<div v-if="editing == false">{{nodeDetailFormData.email}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.email"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item label="税号：">
<div v-if="editing == false">{{nodeDetailFormData.dutyParagraph}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.dutyParagraph"></el-input>
</div>
</el-form-item>
</div>
<div class="clear"></div>
<div class="node-form-field">
<el-form-item
label="存储API："
prop="ipfsApi"
>
<div v-if="editing == false">{{nodeDetailFormData.ipfsApi}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.ipfsApi"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item
label="存储节点："
prop="ipfsBootstrap"
>
<div v-if="editing == false">{{nodeDetailFormData.ipfsBootstrap}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.ipfsBootstrap"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item label="开户行：">
<div v-if="editing == false">{{nodeDetailFormData.openingBank}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.openingBank"></el-input>
</div>
</el-form-item>
</div>
<div class="node-form-field">
<el-form-item label="银行账号：">
<div v-if="editing == false">{{nodeDetailFormData.bankAccount}}</div>
<div
v-if="editing == true"
class="boolEdit_Input"
>
<el-input v-model="nodeDetailFormData.bankAccount"></el-input>
</div>
</el-form-item>
</div>
<div
class="node-form-field"
v-if="editing == false"
>
<el-form-item label="企业成员：">
<div>{{nodeDetailFormData.userCount}}人</div>
</el-form-item>
</div>
<div
class="node-form-field"
v-if="editing == false"
>
<el-form-item label="企业部门：">
<div>{{nodeDetailFormData.deptCount}}个</div>
</el-form-item>
</div>
<div
class="node-form-field"
v-if="editing == false"
>
<el-form-item label="创建时间：">
<div>{{nodeDetailFormData.strCreateTime}}</div>
</el-form-item>
</div>
</div>
</div>
</el-form>
</div>
</div>
</template>

<script>
import CardHeader from "@/components/card-header";
import * as services from "../services";

const dataParamRules = {
companyName: [
{ required: true, message: "请输入企业简称", trigger: ["blur", "change"] },
],
compAllName: [
{ required: true, message: "请输入企业全称", trigger: ["blur", "change"] },
],
proviceName: [
// { type:'number', required: true, message: "请选择所属省份", trigger:'change' },
{ required: true, message: "请选择所属省份", trigger: "change" },
],
industryName: [
{ required: true, message: "请选择所属行业", trigger: "change" },
],
telphone: [
{ required: true, message: "请输入单位电话", trigger: ["blur", "change"] },
],
cnName: [
{ required: true, message: "请输入法人", trigger: ["blur", "change"] },
],
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
phone: [
{ required: true, message: "请输入手机号", trigger: ["blur", "change"] },
],
email: [
{ required: true, message: "请输入邮箱", trigger: ["blur", "change"] },
],
ipfsApi: [
{
max: 64,
required: true,
message: "请输入64个字数之内的任意字符串",
trigger: ["blur", "change"],
},
],
ipfsBootstrap: [
{
max: 1024,
required: true,
message: "请输入1024个字数之内的任意字符串",
trigger: ["blur", "change"],
},
],
};

export default {
components: { CardHeader },
props: {
node: {
type: Object,
default: () => ({}),
},
},
data() {
return {
editing: false,
companyRules: dataParamRules,
nodeDetailFormData: {},
industryOptions: [],
proviceOptions: [],
nodeDetailData: {},
};
},
computed: {
el_formLabelcolor() {
return this.editing ? "textlabelblock" : "textlabelgray";
},
},
watch: {
editing(v) {
if(!v) {
this.nodeDetailFormData = { ...this.nodeDetailData };
}
},
node(nextNode) {
if(nextNode) {
this.loadCompanyInfo(nextNode.id);
}
},
},
mounted() {
this.loadIndustury();
this.loadProvinces();
if (this.node) {
this.loadCompanyInfo(this.node.id);
}
},
methods: {
/**
* 加载一级行业
*/
async loadIndustury() {
const resData = await this.$fetchApi("industry/queryAllIndustry");
const indList = (resData.Data || []).map((obj) => ({
industryID: obj.Id,
name: obj.Name,
}));
this.industryOptions = indList;
},
/**
* 省选项列表
*/
async loadProvinces() {
const res = await this.$fetchApi("provice/queryAllProvice");
this.proviceOptions = (res.Data || []).map((o) => ({
id: o.Id,
label: o.ProviceName,
}));
},
/**
* 获取某个企业整体信息情况
*/
async loadCompanyInfo(companyId) {
const resData = await services.fetchCompanyDetail(companyId);
this.nodeDetailData = resData;
this.nodeDetailFormData = { ...this.nodeDetailData };
},
/**
* 更新企业信息
*/
updateCompanyInfo() {
this.$refs['form'].validate(async (valid)=>{
console.log('valid', valid);
if(!valid) return;
this.nodeDetailFormData.modifyUserID = sessionStorage.userId;
const res = await services.updateCompany(this.nodeDetailFormData);
const flag = res.Code === 0;
if (!flag) {
this.$notify({
message: res.Msg,
type: ["warning"],
})
return;
}
this.$notify({
message: `企业“${this.nodeDetailFormData.companyName}”已完成修改。`,
type: ["success"],
duration: 2500,
});
this.loadCompanyInfo();
this.nodeDetailData = this.nodeDetailFormData;
// this.initCompanyRecord = {...this.nodeDetailFormData};//保存之后信息得同步 否则取消的时候回出问题
// this.el_formLabelcolor = "textlabelgray";
// this.editButtonGroup = 1;
this.editing = false;
// this.rightTitle = this.nodeDetailFormData.companyName;
});
},
/**
* 启用/禁用企业
*/
toggleState: function () {
const nextState = this.nodeDetailFormData.disable == 0 ? 1 : 0;
var thisApp = this;
var actionText = "";
var type ="warning"
if (nextState == 0) {
actionText = "启用";
} else {
actionText = "禁用";
type="error"
}
this.$confirm(`${actionText}的企业将${actionText == "禁用" ? "无法" : "有权"}访问LOCKING， 确定${actionText}企业“${this.nodeDetailFormData.companyName}”吗？`,"",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: type,
}
)
.then(async () => {
this.nodeDetailFormData.modifyUserID = sessionStorage.userId;
this.nodeDetailFormData.disable = nextState;
const res = await services.switchCompanyEnable(
this.nodeDetailFormData.companyID,
nextState
);
const flag = res.Code === 0;
if (!flag) {
thisApp.$notify({
type:'error',
message: res.Msg,
offset: 100,
duration: 5000,
});
return;
}
thisApp.$notify({
message: `企业“${this.nodeDetailFormData.companyName}”已${actionText}。`,
type: ["success"],
//offset: 100,
duration: 2500,
});
})
.catch(() => {
});
},
/**
* 删除企业
*/
deleteCompany: function () {
this.$confirm(`确定删除企业“${this.nodeDetailFormData.companyName}”吗？`,
"",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(async () => {
const companyId = this.nodeDetailFormData.companyID;
const resData = await this.$fetchApi("company/deleteCompanyById", {
id: companyId,
});
const deleteSuccess = resData.Code === 0;
if (deleteSuccess) {
this.currentPain = 1;
this.$notify({
message: `企业“${this.nodeDetailFormData.companyName}”已删除。`,
type: ["success"],
duration: 2500,
});
this.$emit('remove', this.node);
} else {
this.$notify({
type:'error',
message: resData.Data,
offset: 100,
duration: 5000,
});
}
})
.catch(() => {
});
},
},
};
</script>

<style lang="scss" scoped>
.company-node-view {
&-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 0 24px;
}
&-body {
padding: 0 24px;
}
.form {
&-subtitle {
color: rgba(50, 50, 60, 100);
font-size: 13px;
height: 44px;
line-height: 44px;
}
}
.node-form-field {
display: inline-block;
box-sizing: border-box;
vertical-align: top;
width: 50%;
padding-right: 20px;
}
}

.dropdown-button {
&.danger_button {
color: red;
}
}
</style>

+ 79
- 0
src/views/manage_system/customer/components/side-tree.vue Dosyayı Görüntüle

@@ -0,0 +1,79 @@
<template>
<div class="admin_treeBox navtree side-tree">
<div class="admininput_search">
<el-input
placeholder="搜索名称"
prefix-icon="Cicon icon font_family icon-icon_sousuo iconsize_mini"
class="el-input_mini"
v-model="searchVal"
/>
</div>
<!-- 树形导航 -->
<div class="navtreebox">
<el-tree
:data="nodeList"
node-key="id"
default-expand-all
@node-click="nodeClick"
ref="tree"
:highlight-current="true"
:filter-node-method="filterTreeNode"
:expand-on-click-node="false"
:indent="8"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<i class="el-icon-models" v-if="data.id=='default'"></i>
<i class v-if="node.isLeaf == false && data.id!='default'"></i>
<i class="el-icon-floder" v-if="data.nodeType == 'company'"></i>
<i
class="el-tree-node__expand-icon el-icon-caret-right bianjutop bianjutop2"
v-if="node.isLeaf == true && data.id!='default' && node.childNodes.length == 0 && node.level == 2"
></i>
<span>{{ node.label }}</span>
</span>
</span>
</el-tree>
</div>
</div>
</template>

<script>
export default {
props: {
nodeList: Array
},
data() {
return {
searchVal: '',
};
},
mounted() {
if(this.nodeList && this.nodeList.length) {
this.$refs.tree.setCurrentNode(this.nodeList[0]);
}
},
watch: {
searchVal(val) {
this.$refs.tree.filter(val);
},
nodeList(list) {
setTimeout(() => {
this.$refs.tree.setCurrentNode(list[0]);
}, 0);
},
},
methods: {
nodeClick(node) {
this.$emit('node-click', node);
},
/*
* 筛选符合条件的tree节点
*/
filterTreeNode: function (value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
}
}
</script>

+ 150
- 1599
src/views/manage_system/customer/index.vue
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle


Yaz Önizleme
Yükleniyor…
İptal
Kaydet