merge

src/views/operation/invoiceApply/detail/feeTable.vue

@@ -139,32 +139,7 @@ const [registerTable, { setTableData, setProps, getSelectRows, setLoading }] = u
   immediate: false,
 })
 const props = defineProps({
-  // 当前组件类型（应收或应付）
-  tbType: {
-    type: String,
-    default: '',
-  },
-  // 兄弟组件传过来的复制的数据
-  broData: {
-    type: Array,
-    default: () => {
-      return []
-    },
-  },
-  // 业务ID
-  id: {
-    type: String,
-    default: '',
-  },
-  // 业务数据
   details: { type: [Object, Array] },
-  // 业务类型
-  type: { type: [String, Number] },
-  // 表格高度
-  height: {
-    type: [String, Number],
-    default: '300'
-  }
 })
 const feeFlag = ref(false)
 function openFee() {

src/views/operation/invoiceIssue/api.js

@@ -25,3 +25,10 @@ export function Audit(parameter) {
 }
 
 
+export function GetInvoiceCodeList() {
+  return request({
+    url: '/mainApi/ClientCommon/GetInvoiceCodeList',
+    method: 'get',
+  })
+}
+

src/views/operation/invoiceIssue/detail/editCompent.vue

@@ -1,13 +1,13 @@
 <template>
     <div @mouseover="showTooltip = true" @mouseleave="showTooltip = false" class="invoiceNo">
-        <span>{{ label }}</span>
+        <span class="label" >{{ label }}</span>
         <span v-show="invoiceEditFlag">
             <slot name="text"></slot>
         </span>
-        <span v-show="!invoiceEditFlag">
+        <span v-show="!invoiceEditFlag" style="flex-grow: 1" >
             <slot name="content"></slot>
         </span>
-        <span class="iconfont icon-bianji1" style="cursor: pointer" @click="CilckEdit" v-show="showTooltip"></span>
+        <span class="iconfont icon-bianji1" style="cursor: pointer" @click="CilckEdit" v-show="showTooltip && showEdit"></span>
     </div>
 </template>
 <script lang="ts" setup>
@@ -25,6 +25,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  showEdit: {
+    type: Boolean,
+    default: true,
+  },
 })
 </script>
 <style lang="less" scoped >
@@ -32,5 +36,12 @@ const props = defineProps({
     font-size: 12px;
     display: flex;
     width: 100%;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.label{
+    margin-right: 5px;
+    font-weight: 400;
+    color: rgba(158, 83, 9, 1);
 }
 </style>

src/views/operation/invoiceIssue/detail/index.vue

@@ -75,44 +75,142 @@
                 </div>
             </div>
             <div class="content">
-
                 <div class="left">
                     <div class="left-top">
-                        <div class="left-top-item">
+                        <div class="left-top-item" style="padding-right: 100px">
                             <editCompent ref="editCompentRef" label="发票币别:">
                                 <template #text>
                                     <span> {{ form.currency }}</span>
                                 </template>
                                 <template #content>
-                                    <a-select size="small" v-model:value="form.currency" style="width: 100%" >
+                                    <a-select size="small" v-model:value="form.currency" style="width: 100%">
-                                        <a-select-option :key="index" v-for="(item,index) in currencyList" :value="item.codeName">{{item.description}}</a-select-option>
+                                        <a-select-option :key="index" v-for="(item, index) in currencyList"
+                                            :value="item.codeName">{{ item.description }}</a-select-option>
                                     </a-select>
                                 </template>
                             </editCompent>
-                        </div>
+                            <editCompent :showEdit="false" ref="editCompentRef" label="开票类型:">
-                        <div class="left-top-item">
-                            <editCompent ref="editCompentRef" label="发票币别:">
                                 <template #text>
-                                    <span> {{ form.currency }}</span>
+                                    <span>正票</span>
+                                </template>
+                            </editCompent>
+                            <editCompent ref="editCompentRef" label="开票日期:">
+                                <template #text>
+                                    <span> {{ form.invoiceDate }}</span>
                                 </template>
                                 <template #content>
-                                    <a-select size="small" v-model:value="form.invoiceNO" style="width: 100%" >
+                                    <a-date-picker size="small" style="width: 100%" valueFormat="YYYY-MM-DD"
-                                        <a-select-option :key="index" v-for="(item,index) in currencyList" :value="item.codeName">{{item.description}}</a-select-option>
+                                        v-model:value="form.invoiceDate" />
-                                    </a-select>
                                 </template>
                             </editCompent>
                         </div>
-                        <div class="left-top-item">
+                        <div class="left-top-item middle" style="padding-left: 9%;">
-                            <editCompent ref="editCompentRef" label="发票币别:">
+                            <a-dropdown>
+                                <a style="color: rgba(158, 83, 9, 1);">
+                                    {{ getCategory() }}
+                                    <DownOutlined />
+                                </a>
+                                <template #overlay>
+                                    <a-menu @click="onClick">
+                                        <a-menu-item key="bs">
+                                            <a href="javascript:;">全电专票(电子)</a>
+                                        </a-menu-item>
+                                        <a-menu-item key="pc">
+                                            <a href="javascript:;">全电普票(电子)</a>
+                                        </a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </div>
+                        <div class="left-top-item" style="padding-left: 120px">
+                            <editCompent :showEdit="false" ref="editCompentRef" label="发票号:">
                                 <template #text>
-                                    <span> {{ form.currency }}</span>
+                                    <span>{{ form.invoiceNO }}</span>
                                 </template>
-                                <template #content>
+                            </editCompent>
-                                    <a-select size="small" v-model:value="form.invoiceNO" style="width: 100%" >
+                            <editCompent :showEdit="false" ref="editCompentRef" label="发票代码:">
-                                        <a-select-option :key="index" v-for="(item,index) in currencyList" :value="item.codeName">{{item.description}}</a-select-option>
+                                <template #text>
-                                    </a-select>
+                                    <span>{{ form.invoiceNO }}</span>
                                 </template>
                             </editCompent>
+                            <editCompent :showEdit="false" ref="editCompentRef" label="发票流水号:">
+                                <template #text>
+                                    <span>{{ form.invoiceNO }}</span>
+                                </template>
+                            </editCompent>
+                        </div>
+                    </div>
+                    <div class="box">
+                        <div class="box-top">
+                            <div class="box-top-item" style="border-right: 1px solid rgba(158, 83, 9, 1)">
+                                <editCompent ref="editCompentRef" label="购买方名称:">
+                                    <template #text>
+                                        <span> {{ form.customerName }}</span>
+                                    </template>
+                                    <template #content>
+                                        <a-select size="small" v-model:value="form.customerId" style="width: 90%">
+                                            <a-select-option :key="index" v-for="(item, index) in customerList"
+                                                :value="item.id">{{ item.pinYinCode }}</a-select-option>
+                                        </a-select>
+                                    </template>
+                                </editCompent>
+                                <editCompent ref="editCompentRef" label="纳税人识别号/统一社会信用代码:">
+                                    <template #text>
+                                        <span> {{ form.taxID }}</span>
+                                    </template>
+                                    <template #content>
+                                        <a-input v-model:value="form.taxID" size="small"></a-input>
+                                    </template>
+                                </editCompent>
+                            </div>
+                            <div class="box-top-item">
+                                <editCompent ref="editCompentRef" label="销售方名称:">
+                                    <template #text>
+                                        <span> {{ form.customerName }}</span>
+                                    </template>
+                                    <template #content>
+                                        <a-select size="small" v-model:value="form.customerId" style="width: 90%">
+                                            <a-select-option :key="index" v-for="(item, index) in customerList"
+                                                :value="item.id">{{ item.pinYinCode }}</a-select-option>
+                                        </a-select>
+                                    </template>
+                                </editCompent>
+                                <editCompent ref="editCompentRef" label="纳税人识别号/统一社会信用代码:">
+                                    <template #text>
+                                        <span> {{ form.taxID }}</span>
+                                    </template>
+                                    <template #content>
+                                        <a-input v-model:value="form.taxID" size="small"></a-input>
+                                    </template>
+                                </editCompent>
+                            </div>
+                        </div>
+                        <div class="box-row">
+                            <span style="font-weight: bold;color:rgba(158, 83, 9, 1) ">发票明细</span>
+                            <a-button v-repeat type="link" @click="add">
+                                <span class="iconfont icon-jia"></span>添加
+                            </a-button>
+                            <a-button v-repeat type="link">
+                                <span class="iconfont icon-shanchu1"></span>删除
+                            </a-button>
+                            <a-button v-repeat type="link">
+                                <span class="iconfont icon-peizhitubiaosvg-"></span>费用明细
+                            </a-button>
+                            <a-button v-repeat type="link">
+                                <span class="iconfont icon-fujian1"></span>附件
+                            </a-button>
+                        </div>
+                        <div class="invoiceIssue-table" >
+                            <input class="ds-tb-check" type="checkbox" v-model="allCheck" :indeterminate="someCheck" />
+                            <hot-table ref="hotTb" :data="list" :settings="settings">
+                                <img v-show="!list.length" class="hot-tb-no-data"
+                                    src="../../../../assets/images/nodata.png" alt="" />
+                            </hot-table>
+                        </div>
+                        <div>
+                            <span>合计</span>
+                            <span>金额:</span>
+                            <span>税额:</span>
                         </div>
                     </div>
                 </div>
@@ -121,14 +219,14 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, defineComponent, nextTick } from 'vue'
 import editCompent from './editCompent.vue'
 import { BasicForm, useForm } from '/@/components/Form/index'
 import { AutoComplete } from 'ant-design-vue'
 import feeTable from './feeTable.vue'
 import { DownOutlined } from '@ant-design/icons-vue'
 import {
-
+    GetInvoiceCodeList
 } from '../api'
 import { useMessage } from '/@/hooks/web/useMessage'
 import { useRoute, useRouter } from 'vue-router'
@@ -140,11 +238,16 @@ import { GetFeeCurrencySelectList, GetClientListByCode } from '/@/api/common'
 import dayjs from 'dayjs'
 import { useGo } from '/@/hooks/web/usePage'
 import { useUserStore } from '/@/store/modules/user'
-import { set } from 'nprogress'
 import { isNamedTupleMember } from 'typescript'
 import { detailColumns } from '../columns'
-import { get } from 'sortablejs'
+import { HotTable } from '@handsontable/vue3'
 import { useMultipleTabStore } from '/@/store/modules/multipleTab'
+import { registerAllModules } from 'handsontable/registry'
+import 'handsontable/dist/handsontable.full.min.css'
+defineComponent({
+    HotTable,
+})
+registerAllModules()
 const tabStore = useMultipleTabStore()
 const userStore = useUserStore()
 const go = useGo()
@@ -154,18 +257,286 @@ const id = ref(route.query.id)
 const loading = ref(false)
 const invoiceNO = ref('')
 const editCompentRef = ref()
-const form = ref({}) as any
+const form = ref({
+    category: '全电普票(电子)',
+    categoryCode: 'pc'
+}) as any
 const currencyList = ref([]) as any
+const customerList = ref([]) as any
 onMounted(() => {
     GetFeeCurrencySelectList().then(res => {
         currencyList.value = res.data
     })
+    GetClientListByCode().then(res => {
+        customerList.value = res.data
+    })
+    // 
 })
 function handleBlur() {
     editCompentRef.value.invoiceEditFlag = true
 }
+const row = {
+    selected: false,
+    name: '',
+    taxAmount: '',
+    taxRate: '',
+    amount: '',
+    unitPrice: '',
+    taxUnitPrice: '',
+    quantity: 1,
+    unit: '',
+    specification: '',
+}
+// 增加行
+const add = () => {
+    const deepCopyRow = JSON.parse(JSON.stringify(row))
+    list.value.push(deepCopyRow)
+    const hot = hotTb.value.hotInstance
+    hotTb.value.hotInstance.loadData(list)
+    nextTick(() => {
+        hot.selectCell(list.value.length - 1, 1)
+    })
+}
+
+function onClick({ key }) {
+    form.value.categoryCode = key
+    CategoryData.forEach((item) => {
+        if (item.value == key) {
+            form.value.category = item.label
+        }
+    })
+}
+const CategoryData = [
+    {
+        value: 'bs',
+        label: '全电专票(电子)'
+    },
+    {
+        value: 'pc',
+        label: '全电普票(电子)'
+    },
+]
+function getCategory() {
+    let str = ''
+    CategoryData.forEach((item) => {
+        if (item.value == form.value.categoryCode) {
+            str = item.label
+        }
+    })
+    return str
+}
+// 费用名称字典
+const feeDict = ref([])
+// 表格绑定数据
+const list = ref([]) as any
+const hotTb = ref(null) as any
+const activeKey = ref('1')
+// 全部勾选
+const allCheck = ref(false)
+// 部分勾选
+const someCheck = ref(false)
+import { feeUnitDict } from '/@/hooks/dict/index'
+const unitDict = ref([]) as any
+// 定义表格所有列
+const columns = [
+    {
+        data: 'selected',
+        type: 'checkbox',
+        title: ' ',
+        width: 32,
+        className: 'htCenter',
+        readOnly: false,
+    },
+    {
+        title: '项目名称',
+        width: 120,
+        data: 'name',
+        type: 'dropdown',
+        // 下拉框数据，可以同步或者异步返回(异步需要process返回)
+        source: async (query, process) => {
+            const res = feeDict.value.length ? feeDict.value : (await GetInvoiceCodeList())?.data
+            if (!feeDict.value.length) feeDict.value = res
+            const dict = res.map((res) => {
+                return res.displayName
+            })
+            process(dict)
+        },
+    },
+    {
+        title: '规格型号',
+        width: 120,
+        data: 'specification',
+    },
+    {
+        title: '单位',
+        width: 120,
+        data: 'unit',
+        type: 'dropdown',
+        source: async (query, process) => {
+            if (unitDict.value && unitDict.value.length) {
+                const dict = unitDict.value.map((item) => {
+                    return item.value + '-' + item.name
+                })
+                process(dict)
+            } else {
+                const results = await feeUnitDict()
+                unitDict.value = results
+                const dict = results.map((item) => {
+                    return item.value + '-' + item.name
+                })
+                process(dict)
+            }
+        },
+    },
+    {
+        title: '数量',
+        width: 60,
+        data: 'quantity',
+        type: 'numeric',
+        format: '0',
+    },
+    {
+        title: '单价',
+        width: 80,
+        data: 'taxUnitPrice',
+        type: 'numeric',
+        format: '0.00',
+    },
+    {
+        title: '不含税单价',
+        width: 100,
+        data: 'unitPrice',
+        type: 'numeric',
+        readOnly: true,
+    },
+    {
+        title: '金额',
+        width: 80,
+        data: 'amount',
+        type: 'numeric',
+    },
+    {
+        title: '不含税金额',
+        width: 100,
+        data: 'noTaxAmount',
+        type: 'numeric',
+    },
+    {
+        title: '税率',
+        width: 80,
+        data: 'taxRate',
+        type: 'numeric',
+    },
+    {
+        title: '税额',
+        width: 80,
+        data: 'taxAmount',
+        type: 'numeric',
+        readOnly: true,
+    },
+    {
+        title: '是否享受优惠政策',
+        width: 100,
+        data: 'taxAmount',
+        type: 'numeric',
+        readOnly: true,
+    },
+    {
+        title: '增值税特殊管理',
+        width: 100,
+        data: 'taxAmount',
+        type: 'numeric',
+        readOnly: true,
+    },
+    {
+        title: '零税率标识',
+        width: 100,
+        data: 'taxAmount',
+        type: 'numeric',
+        readOnly: true,
+    },
 
+]
 
+// 表格配置项
+const settings = {
+    height: '350',
+    autoWrapRow: true,
+    autoWrapCol: true,
+    // 每行的高度
+    rowHeights: 32,
+    fixedColumnsLeft: 1,
+    // 控制回车移动
+    enterMoves: 'row',
+    columnSorting: true,
+    // 如果通过复制或者填写校验出现错误，清空输入框
+    afterValidate: function (isValid, value, row, prop, source) {
+        if (!isValid) {
+            hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
+        }
+    },
+    columns: columns,
+    // 此行直接复制，必须(非商用)
+    licenseKey: 'non-commercial-and-evaluation',
+    // 定义所有单元格发生变化的回调处理
+    afterChange(changes, source) {
+        // 这里定义了编辑，自动填充和拷贝数据的处理逻辑
+        if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
+            let dict = {} as any
+            // 当前操作的行
+            const index = changes[0][0]
+            // 修改单价计算
+            if (changes[0][1] === 'taxUnitPrice') {
+                // 不含税单价
+                list.value[index].unitPrice = Number(
+                    (changes[0][3] || 0) / ((list.value[index].taxRate || 0) / 100 + 1),
+                ).toFixed(2)
+                // 金额
+                list.value[index].amount = Number(
+                    (changes[0][3] || 0) * (list.value[index].quantity || 0),
+                ).toFixed(2)
+                // 不含税金额
+                list.value[index].noTaxAmount = Number(
+                    (list.value[index].unitPrice || 0) * (list.value[index].quantity || 0),
+                ).toFixed(2)
+                // 税额
+                list.value[index].taxAmount = Number(
+                    (list.value[index].amount || 0) - (list.value[index].noTaxAmount || 0),
+                ).toFixed(2)
+            }
+            // 修改数量
+            if (changes[0][1] === 'quantity') {
+                // 金额
+                list.value[index].amount = Number(
+                    (changes[0][3] || 0) * (list.value[index].taxUnitPrice || 0),
+                ).toFixed(2)
+                // 不含税金额
+                list.value[index].noTaxAmount = Number(
+                    (changes[0][3] || 0) * (list.value[index].unitPrice || 0),
+                ).toFixed(2)
+                // 税额
+                list.value[index].taxAmount = Number(
+                    (list.value[index].amount || 0) - (list.value[index].noTaxAmount || 0),
+                ).toFixed(2)
+            }
+            // 修改税率
+            if (changes[0][1] === 'taxRate') {
+                // 不含税单价
+                list.value[index].unitPrice = Number(
+                    (list.value[index].taxUnitPrice || 0) / ((changes[0][3] || 0) / 100 + 1),
+                ).toFixed(2)
+                // 不含税金额
+                list.value[index].noTaxAmount = Number(
+                    (list.value[index].unitPrice || 0) * (list.value[index].quantity || 0),
+                ).toFixed(2)
+                // 税额
+                list.value[index].taxAmount = Number(
+                    (list.value[index].amount || 0) - (list.value[index].noTaxAmount || 0),
+                ).toFixed(2)
+            }
+        }
+    },
+}
 
 
 </script>
@@ -205,18 +576,81 @@ function handleBlur() {
 }
 
 .content {
+    padding-left: 15px;
+
     .left {
         background-color: #fffbf7;
-        padding: 15px 20px;
+        padding: 15px 10px;
         width: 60%;
-        .left-top{
+
+        .left-top {
+            padding: 0 20px;
             display: flex;
             width: 100%;
-            .left-top-item{
+
+            .left-top-item {
                 width: 20%;
+                flex-grow: 1;
             }
         }
     }
 
 }
+
+.middle {
+    font-weight: bold;
+    font-size: 22px;
+    padding-top: 24px;
+}
+
+.box {
+    border: 1px solid rgba(158, 83, 9, 1);
+
+    // margin-left: 15px;
+    .box-top {
+        display: flex;
+        border-bottom: 1px solid rgba(158, 83, 9, 1);
+
+        .box-top-item {
+            padding-left: 15px;
+            padding-top: 5px;
+            width: 50%;
+        }
+    }
+
+    .box-row {
+        background: #f7f2ed;
+        padding-left: 15px;
+        font-size: 12px;
+    }
+}
+
+.ds-tb-check {
+    left: 35px;
+}
+
+</style>
+<style lang="less">
+.invoiceIssue-table {
+  .handsontable {
+    .wtHider {
+      max-height: 240px!important;
+      min-height: 160px;
+    }
+    .htCheckboxRendererInput {
+      position: relative;
+      z-index: 999;
+    }
+  }
+  .handsontable .htCore tbody tr td{
+    background: #fffbf7;
+    border-color: #fffbf7;
+    border-bottom: 1px solid #ebeaea;
+  }
+  .handsontable .htCore thead tr th {
+    background: #fffbf7;
+    border-color: #fffbf7;
+    color: rgba(158, 83, 9, 1);
+}
+}
 </style>