From 89eb3e4aacc20256d298e0a3b0ad5f1bf7df3d1e Mon Sep 17 00:00:00 2001
From: shenyuan <shenyuan2825@163.com>
Date: Wed, 15 Mar 2023 17:35:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E7=A5=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/config/router.config.js               |   4 +
 .../views/shopping/components/billDetail.vue  | 156 +++++++
 .../views/shopping/components/billTitle.vue   | 394 ++++++++++++++++++
 .../views/shopping/pages/gerenzhongxin.vue    |  27 +-
 4 files changed, 574 insertions(+), 7 deletions(-)
 create mode 100644 ant-design-vue-jeecg/src/views/shopping/components/billDetail.vue
 create mode 100644 ant-design-vue-jeecg/src/views/shopping/components/billTitle.vue

diff --git a/ant-design-vue-jeecg/src/config/router.config.js b/ant-design-vue-jeecg/src/config/router.config.js
index 5aa5dcd2..b360df4f 100644
--- a/ant-design-vue-jeecg/src/config/router.config.js
+++ b/ant-design-vue-jeecg/src/config/router.config.js
@@ -668,4 +668,8 @@ export const constantRouterMap = [
     path: '/shopping/placeOrder',//这里是你需要设置新窗口打开的页面的路径s
     component: () => import('@/views/shopping/pages/placeOrder'),
   },
+  {
+    path: '/shopping/billDetail',//这里是你需要设置新窗口打开的页面的路径s
+    component: () => import('@/views/shopping/components/billDetail'),
+  },
 ]
diff --git a/ant-design-vue-jeecg/src/views/shopping/components/billDetail.vue b/ant-design-vue-jeecg/src/views/shopping/components/billDetail.vue
new file mode 100644
index 00000000..39d79ac0
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/shopping/components/billDetail.vue
@@ -0,0 +1,156 @@
+<template>
+  <div style="background: #F6F6F6;">
+    <div class="bg">
+      <Header></Header>
+      <h1 class="c_fff">发票详情</h1>
+    </div>
+    <div class="billDetail">
+      <div class="table" cellspacing="0" cellpadding="0">
+        <tr>
+          <td class="title">订单编号</td>
+          <td class="cont">257677098401</td>
+          <td class="title">发票状态</td>
+          <td class="cont">已开票</td>
+        </tr>
+        <tr>
+          <td class="title">下单时间</td>
+          <td class="cont">2022-12-06 18:19:44</td>
+          <td class="title">发票内容</td>
+          <td class="cont">商品明细</td>
+        </tr>
+        <tr>
+          <td class="title">发票类型</td>
+          <td class="cont">电子普通发票</td>
+          <td class="title">发票抬头</td>
+          <td class="cont">个人</td>
+        </tr>
+      </div>
+      <div class="table table1" cellspacing="0" cellpadding="0">
+        <tr class="title">
+          <th>发票代码</th>
+          <th>发票号码</th>
+          <th>微信扫码获取电子普通发票</th>
+          <th>下载电子增值税普通发票</th>
+        </tr>
+        <tr>
+          <td>041002200111</td>
+          <td>40821456</td>
+          <td class="erweima">
+            <img src="../assets/erweima.png" />
+          </td>
+          <td><span class="download" @click="downLoad"><i class="el-icon-download"></i>查看发票</span></td>
+        </tr>
+      </div>
+      <div class="btnList d-flex">
+        <div class="btn" @click="handleBack">返回</div>
+        <div class="btn">发送邮箱</div>
+        <div class="btn">申请换开</div>
+      </div>
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+<script>
+  import Header from "./Header/HeaderView";
+  import Footer from "./Footer/FooterView"
+  export default {
+    name: "billDetail",
+    components: { Header,Footer },
+    data() {
+      return {
+      };
+    },
+    methods: {
+      downLoad(){
+
+      },
+      handleBack(){
+        this.$router.go(-1)
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  @import '../assets/common.css';
+  .bg{
+    background-image: url("../assets/bg06.png");
+    height: 352px;
+    line-height: 400px;
+    text-align: center;
+    h1{
+      font-size: 40px;
+    }
+  }
+  .table tr th, .table tr td { border:1px solid #F2F2F2;padding: 10px;}
+  .table { border-collapse: collapse;}
+  .billDetail{
+    width: 1120px;
+    height: 500px;
+    margin: 30px auto;
+    background: #FFFFFF;
+    padding: 100px 150px;
+    .table{
+      width: 820px;
+      tr{
+        width: 820px;
+        th{
+          font-size: 12px;
+        }
+        td{
+          i{
+            margin-right: 2px;
+          }
+        }
+      }
+      .title{
+        width: 150px;
+        text-align: center;
+      }
+      .cont{
+        width: 260px;
+      }
+      margin-bottom: 40px;
+    }
+    .table1{
+      .title{
+        background: #EEE6D9;
+      }
+      td{
+        width: 205px;
+        text-align: center;
+      }
+      .erweima{
+        img{
+          width: 70px;
+          height: 70px;
+        }
+      }
+      .download{
+        cursor: pointer;
+      }
+    }
+    .btnList{
+      justify-content: center;
+      .btn{
+        margin-right: 33px;
+        width: 150px;
+        height: 42px;
+        border-radius: 3px 3px 3px 3px;
+        opacity: 1;
+        border: 1px solid #E4393C;
+        text-align: center;
+        font-size: 14px;
+        color: #E4393C;
+        line-height: 42px;
+        transition: all 0.2s;
+        cursor: pointer;
+        &:hover{
+          background-color: #E4393C;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
+
diff --git a/ant-design-vue-jeecg/src/views/shopping/components/billTitle.vue b/ant-design-vue-jeecg/src/views/shopping/components/billTitle.vue
new file mode 100644
index 00000000..fa23d660
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/shopping/components/billTitle.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="billTitle">
+    <div class="weizhuce d-flex" v-if="billTitle.length == 0">
+      <p class="c_1B f_30"> 您还没有抬头。</p>
+    </div>
+    <div class="d-flex btnDiv">
+      <div type="primary" class="dialogButton primary   f_12" @click="addAddr">创建新抬头</div>
+    </div>
+    <div class="addrList" v-if="billTitle.length != 0">
+      <div class="item" v-for="(item,index) in billTitle" :key="index">
+        <p class="default" v-if="item.flag"><span class="f_12">默认抬头</span></p>
+        <div class="d-flex">
+          <div><span v-if="item.type == 1">专用发票抬头</span><span v-if="item.type == 2">普通发票抬头</span></div>
+          <div class="btnDiv">
+            <span class="btn" @click="handleEdit(item)">编辑</span>
+            <a-popconfirm
+              title="确定删除吗?"
+              ok-text="Yes"
+              cancel-text="No"
+              @confirm="confirm1(item.id)"
+              @cancel="cancel"
+            ><span class="btn">删除</span></a-popconfirm>
+            <a-popconfirm
+              title="确定将其设置为默认抬头吗?"
+              ok-text="Yes"
+              cancel-text="No"
+              @confirm="confirm2(item.id)"
+              @cancel="cancel"
+              v-if="!item.flag"
+            ><span class="btn">将其设置为默认抬头</span></a-popconfirm>
+<!--            <span class="btn" v-if="!item.flag" @click="handleDefault(item.id)">将其设置为默认抬头</span>-->
+          </div>
+        </div>
+        <p>
+          {{item.name}}
+        </p>
+        <p>{{item.dutyNum}}</p>
+      </div>
+    </div>
+    <a-modal
+      title="发票抬头操作"
+      :visible="visible"
+      :width="800"
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel">
+          取消
+        </a-button>
+        <a-button key="submit" type="primary" @click="handleOk">
+          确定
+        </a-button>
+      </template>
+
+      <template>
+        <a-form-model
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="labelCol" :wrapper-col="wrapperCol"
+          class="modelForm"
+        >
+          <a-form-model-item label="发票类型" >
+            <a-select v-model="form.type" placeholder="请选择发票类型">
+              <a-select-option value="1">
+                专用发票
+              </a-select-option>
+              <a-select-option value="2">
+                普通发票
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item
+            label="发票抬头"
+            prop="name"
+          >
+            <a-input  placeholder="请输入发票抬头" v-model="form.name" />
+          </a-form-model-item>
+          <a-form-model-item
+            label="税号"
+            prop="dutyNum"
+          >
+            <a-input  placeholder="请输入税号" v-model="form.dutyNum" />
+          </a-form-model-item>
+          <a-form-model-item
+            label="公司注册电话"
+            prop="phone"
+          >
+            <a-input  placeholder="请输入公司注册电话" v-model="form.phone">
+              <template slot="addonBefore">
+                <span>+86 中国大陆地区</span>
+              </template>
+            </a-input>
+          </a-form-model-item>
+          <a-form-model-item
+            label="银行账户"
+            prop="card"
+          >
+            <a-input  placeholder="请输入银行账户" v-model="form.card">
+            </a-input>
+          </a-form-model-item>
+          <a-form-model-item label="公司注册地址" prop="detailed">
+            <a-input v-model="form.detailed" type="textarea" />
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-checkbox @change="onChange" :checked="form.flag">
+              设置为默认抬头
+            </a-checkbox>
+          </a-form-model-item>
+        </a-form-model>
+      </template>
+    </a-modal>
+  </div>
+</template>
+<script>
+  export default {
+    name: "billTitle",
+    components: {  },
+    data() {
+      return {
+        visible: false,
+        flag:'',//当前操作是添加还是编辑，若为add是添加，为edit是编辑
+        copyItem:{},//备份当行数据
+        labelCol: { span: 5 },
+        wrapperCol: { span: 19 },
+        billTitle:[
+          {
+            id:1,
+            type:'1',//发票类型1为专用2为普通
+            name:'易创网络科技有限公司',
+            flag:true,//是否默认抬头
+            dutyNum:'6974980492840298590',//税号
+            phone:'17888889999',//公司注册电话
+            account:'6212261717000030000',//公司账户
+            addr:'河南省驻马店市驿城区黄淮学院北区'
+          },
+          {
+            id:2,
+            type:'1',//发票类型1为专用2为普通
+            name:'易创网络科技有限公司',
+            flag:false,//是否默认抬头
+            dutyNum:'6974980492840298590',//税号
+            phone:'17888889999',//公司注册电话
+            account:'6212261717000030000',//公司账户
+            addr:'河南省驻马店市驿城区黄淮学院北区'
+          },
+          {
+            id:3,
+            type:'1',//发票类型1为专用2为普通
+            name:'易创网络科技有限公司',
+            flag:false,//是否默认抬头
+            dutyNum:'6974980492840298590',//税号
+            phone:'17888889999',//公司注册电话
+            account:'6212261717000030000',//公司账户
+            addr:'河南省驻马店市驿城区黄淮学院北区'
+          }
+        ],//发票抬头列表
+        addrList:[
+          {
+            id:1,
+            name:'吴一',
+            sex:'1',
+            phone:'17777777777',
+            addr:'210521',
+            detailed:'黄淮学院北区',
+            flag:true,//是否是默认地址
+          },//地址一
+          {
+            id:2,
+            name:'吴二',
+            sex:'2',
+            phone:'17777777777',
+            addr:'210521',
+            detailed:'黄淮学院北区',
+            flag:false,//是否是默认地址
+          },//地址二
+          {
+            id:3,
+            name:'吴三',
+            sex:'1',
+            phone:'17777777777',
+            addr:'210521',
+            detailed:'黄淮学院北区',
+            flag:false,//是否是默认地址
+          },//地址三
+        ],//地址列表
+        addr1:'210521',
+        //弹窗数据
+        form: {
+          id:'',
+          type: undefined,
+          name: '',
+          addr: '',
+          dutyNum: '',
+          account: '',
+          phone: '',
+          flag:false//是否默认地址
+        },
+        rules: {
+          name: [{ required: true, message: '请输入发票抬头', trigger: 'blur' },],
+          dutyNum: [{ required: true, message: '请输入税号', trigger: 'blur' },],
+          visit: [
+            { required: true, message: '请选择您的配送方式', trigger: 'change' },
+          ],
+          addr: [{ required: true, message: '请选择地址', trigger: 'blur' }],
+          detailed: [{ required: true, message: '请输入公司注册地址', trigger: 'blur' }],
+          phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' },],
+          card: [{ required: true, message: '请输入银行账户', trigger: 'blur' },],
+        },
+      };
+    },
+    methods: {
+      addAddr(){
+        this.visible = true
+        this.flag = 'add'
+      },
+      changeDefault(){
+        this.billTitle.forEach(obj =>{
+          if(obj.flag){
+            obj.flag = !obj.flag
+          }
+        })
+      },
+      clearForm(){
+        this.form = {
+          id:'',
+          type: undefined,
+          name: '',
+          addr: '',
+          dutyNum: '',
+          account: '',
+          phone: '',
+          flag:false//是否默认抬头
+        }
+      },
+      handleOk(e) {
+        //判断是添加抬头还是修改抬头
+        let that = this
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {//验证通过
+            if(this.flag == 'add') {//如果是新增抬头
+              if(this.form.flag){//修改为默认抬头
+                this.changeDefault()
+                this.billTitle.unshift(this.form)
+              }else{//不修改为默认抬头
+                this.billTitle.push(this.form)
+              }
+            }else if(this.flag == 'edit'){//如果是修改抬头
+              //查找当前索引
+              let itemIndex3 = this.billTitle.findIndex(item =>item.id == this.form.id)
+              if(this.form.flag){//如果需要修改为默认抬头
+                this.changeDefault()
+                this.form.flag = true
+                this.billTitle[itemIndex3] = this.form
+                console.log("this.billTitle")
+                console.log(this.billTitle)
+              }else{
+                this.billTitle[itemIndex3] = this.form
+              }
+            }
+            //清空表单
+            this.clearForm()
+            this.flag = ''
+            this.visible = false;
+          } else {}
+        });
+      },
+      handleCancel() {
+        this.visible = false;
+        if(this.flag == 'edit'){
+          let itemIndex4 = this.billTitle.findIndex(item =>item.id == this.form.id)
+          this.billTitle[itemIndex4] = this.copyItem
+        }
+        this.flag = ''
+        this.$refs['ruleForm'].resetFields()
+      },
+      onChange(e) {
+        this.form.flag = e.target.checked
+      },
+      handleEdit(item){
+        this.copyItem = JSON.parse(JSON.stringify(item));
+        this.visible = true
+        this.flag = 'edit'
+        this.form = item
+      },
+      confirm1(id) {
+        let itemIndex = this.billTitle.findIndex(item =>item.id == id)
+        this.billTitle.splice(itemIndex,1)
+      },
+      confirm2(id) {
+        this.changeDefault()
+        let itemIndex2 = this.billTitle.findIndex(item =>item.id == id)
+        this.billTitle[itemIndex2].flag = true
+      },
+      cancel(e) {
+        this.$message.warning('已取消');
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  @import '../assets/common.css';
+  .modelForm{
+    padding:20px 100px;
+  }
+  .addrList .j-area-linkage /deep/ .area-select{
+    background-color: #fff;
+    border: none;
+    span{
+      padding-left: 0;
+      font-size: 12px;
+      color:#313131;
+      cursor:auto;
+      font-weight: 500;
+    }
+    i{
+      display: none;
+    }
+  }
+  .btnDiv{
+    justify-content: center;
+    .dialogButton {
+      width: 300px;
+      height: 42px;
+      text-align: center;
+      line-height: 42px;
+      transition: all 0.2s;
+    }
+    .primary {
+      background: #1b1b1b;
+      border: 2px solid #1b1b1b;
+      color: #e5dfd9;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+  .billTitle{
+    width: 1114px;
+    margin:0 auto;
+    padding-top: 50px;
+    .weizhuce{
+      text-align: center;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      p{
+        width: 300px;
+      }
+    }
+    .addrList{
+      width: 800px;
+      margin: 0 auto;
+      .item{
+        padding-top: 40px;
+        border-bottom: 1px solid #DADADA;
+        color: #1A1919;
+        p{
+          font-size: 12px;
+        }
+        .default{
+          span{
+            display: inline-block;
+            padding: 4px 12px;
+            box-sizing: content-box;
+            background: #F8F8F8;
+            width: 72px;
+            height: 21px;
+            text-align: center;
+            line-height: 21px;
+          }
+
+        }
+        .d-flex{
+          justify-content: space-between;
+          font-size: 14px;
+          .btnDiv{
+            .btn{
+              cursor: pointer;
+            }
+          }
+          .btn{
+            text-decoration: underline;
+            margin-right: 20px;
+          }
+          div:first-child{
+            margin-bottom: 12px;
+          }
+        }
+      }
+    }
+}
+</style>
+
diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue b/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue
index 12c413cc..a039496a 100644
--- a/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue
+++ b/ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue
@@ -126,7 +126,7 @@
       <AddrView v-if="current[0] == 'addr'"></AddrView>
       <div class="invoiceList">
 <!--        发票管理-->
-        <div class="invoice" v-for="(item,index) in invoiceList" :key="index">
+        <div class="invoice" v-if="current[0] == 'invoice1'||'invoice2'||'invoice3'"  v-for="(item,index) in invoiceList" :key="index">
           <div class="d-flex title">
             <span class="c_333 f_16">{{item.date}}</span>
             <span class="font_01" v-if="item.billing">已开票</span>
@@ -144,13 +144,14 @@
               <div class="font_02">开票金额：{{item.price}}</div>
             </div>
             <div class="btnDiv d-flex">
-              <div class="dialogButton primary">申请换开</div>
-              <div class="dialogButton default">查看详情</div>
+              <div class="dialogButton primary" v-if="!item.billing">申请开票</div>
+              <div class="dialogButton primary" v-if="item.billing">申请换开</div>
+              <div class="dialogButton default" v-if="item.billing" @click="toBillDetail(item.id)">查看详情</div>
             </div>
           </div>
         </div>
-<!--        发票抬头管理-->
-        <div class="invoice"></div>
+        <!--        发票抬头管理-->
+        <BillTitle v-if="current[0] == 'invoice4'"></BillTitle>
 
       </div>
       <div class="orderList" >
@@ -201,9 +202,10 @@
   import PasswordModal from '../../system/modules/PasswordModal'
   import Collection from "../components/collection";
   import AddrView from "../components/addrView"
+  import BillTitle from "../components/billTitle"
   export default {
     name: "gerenzhongxin",
-    components: { Header,Footer,PasswordModal ,Collection,AddrView},
+    components: { Header,Footer,PasswordModal ,Collection,AddrView,BillTitle},
     data() {
       return {
       model:{
@@ -293,7 +295,7 @@
             price:2456,//价格
           },
         ],//全部发票数据
-
+        billTitle:[],//发票抬头列表
         url: {
           list: "/starehouse/starehouse/list",
           getusername: "/sys/user/getusername",
@@ -364,6 +366,14 @@
       }
     },
     methods: {
+      toBillDetail(id){
+        this.$router.push({
+          path: "/shopping/billDetail",
+          query: {
+            id: id,
+          },
+        });
+      },
       passwordModalOk() {
         //TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
       },
@@ -491,6 +501,9 @@
         }
         else if(key.key == 'invoice3'){//选择未开发票选项
           this.invoiceList = this.invoiceList1.filter(item=>item.billing == false)
+        }else{
+          this.allOrders=[]
+          this.invoiceList=[]
         }
         // else{
         //   this.allOrders=[]