From 87579ce5e7c1a9864c39196ea75a7badd45df9f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?=
 <14166000+zhangtonghai@user.noreply.gitee.com>
Date: Mon, 8 Jul 2024 17:58:57 +0800
Subject: [PATCH] 07/08

---
 src/views/baseinfo/formcopy/api.ts            |  22 +-
 .../formcopy/components/Modal copy.vue        | 225 +++++++++++
 .../baseinfo/formcopy/components/Modal.vue    | 367 +++++++++++++++++-
 src/views/baseinfo/formcopy/index.vue         |  14 +-
 4 files changed, 616 insertions(+), 12 deletions(-)
 create mode 100644 src/views/baseinfo/formcopy/components/Modal copy.vue

diff --git a/src/views/baseinfo/formcopy/api.ts b/src/views/baseinfo/formcopy/api.ts
index 31bd6996..6fa177d5 100644
--- a/src/views/baseinfo/formcopy/api.ts
+++ b/src/views/baseinfo/formcopy/api.ts
@@ -5,6 +5,9 @@ enum Api {
   list = '/mainApi/FormCopy/GetFormCopyList',
   EditFormCopy = '/mainApi/FormCopy/EditFormCopy',
   GetCodeGoodsTypeInfo = '/mainApi/FormCopy/GetFormCopyInfo',
+  BatchDelFormCopy = '/mainApi/FormCopy/BatchDelFormCopy',
+
+  GetClientPermissionList = '/mainApi/Common/GetClientPermissionList',
 
   GetTablesByClient = '/mainApi/Common/GetTablesByClient',
   GetColumnsByClient = '/mainApi/Common/GetColumnsByClient',
@@ -33,16 +36,31 @@ export function getCodeGoodsTypeInfo(query) {
     params: query,
   })
 }
+// 详情 (Auth)
+export function batchDelFormCopy(query) {
+  return request<DataResult>({
+    url: Api.BatchDelFormCopy,
+    method: 'get',
+    params: query,
+  })
+}
+// 获取客户数据权限列表 (Auth)
+export function getClientPermissionList() {
+  return request<DataResult>({
+    url: Api.GetClientPermissionList,
+    method: 'get',
+  })
+}
 
 // 获取数据库表及视图名-客户端 (Auth)
-export function getTablesByClient(query) {
+export function getTablesByClient() {
   return request<DataResult>({
     url: Api.GetTablesByClient,
     method: 'get',
-    params: query,
   })
 }
 
+
 // 获取数据库表及视图名-客户端 (Auth)
 export function getColumnsByClient(query) {
   return request<DataResult>({
diff --git a/src/views/baseinfo/formcopy/components/Modal copy.vue b/src/views/baseinfo/formcopy/components/Modal copy.vue
new file mode 100644
index 00000000..51225855
--- /dev/null
+++ b/src/views/baseinfo/formcopy/components/Modal copy.vue	
@@ -0,0 +1,225 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :use-wrapper="true"
+    title="编辑表单复制模板"
+    width="50%"
+    @register="registerModal"
+    @ok="handleSave"
+  >
+    <a-form v-model="formData" class="copy-form-model" layout="vertical">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="模版名称" name="templateName">
+            <a-input v-model:value="formData.templateName" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="权限模块名称">
+            <!-- <a-input v-model:value="formData.permissionName" disabled placeholder="请输入" /> -->
+            <a-select v-model:value="formData.permissionName" @change="ChangePermissionName">
+              <a-select-option
+                v-for="item in permissionNameList"
+                :key="item.name"
+                :value="item.name"
+                >{{ item.description }}</a-select-option
+              >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="排序号">
+            <a-input v-model:value="formData.orderNo" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="表单号">
+            <a-input v-model:value="formData.formNo" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="是否可用">
+            <a-radio-group v-model:value="formData.status" button-style="solid">
+              <a-radio-button :value="0">禁用</a-radio-button>
+              <a-radio-button :value="1">启用</a-radio-button>
+            </a-radio-group>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="是否公共表示">
+            <a-radio-group v-model:value="formData.isPublic" button-style="solid">
+              <a-radio-button :value="true">是</a-radio-button>
+              <a-radio-button :value="false">否</a-radio-button>
+            </a-radio-group>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item label="表单设置">
+        <a-checkbox-group v-model:value="checkedList" style="width: 100%">
+          <a-row>
+            <a-col
+              v-for="(item, index) in plainOptions"
+              v-show="item.field != 'id'"
+              :span="6"
+              :key="index"
+            >
+              <a-checkbox :value="item.field">{{ item.label }}</a-checkbox>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+      </a-form-item>
+    </a-form>
+
+    <!--右下角按钮-->
+    <template #footer>
+      <a-button
+        pre-icon="ant-design:close-outlined"
+        type="warning"
+        :loading="loading"
+        ghost
+        style="margin-right: 0.8rem"
+        @click="closeModal"
+      >
+        取消
+      </a-button>
+      <a-button
+        type="success"
+        :loading="loading"
+        pre-icon="ant-design:check-outlined"
+        style="margin-right: 0.8rem"
+        @click="handleSave(false)"
+      >
+        仅保存
+      </a-button>
+      <a-button
+        pre-icon="ant-design:check-circle-outlined"
+        type="primary"
+        :loading="loading"
+        @click="handleSave(true)"
+      >
+        保存并关闭
+      </a-button>
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, reactive, defineEmits } from 'vue'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { EditFormCopy, getCodeGoodsTypeInfo, getTablesByClient, getColumnsByClient } from '../api'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  const emit = defineEmits(['success', 'register'])
+  const isUpdate = ref(true)
+  const loading = ref(false)
+  const rowId = ref('')
+  const form = ref()
+  const checkedList = ref()
+  const formData = reactive({
+    id: '',
+    templateName: '',
+    permissionId: '',
+    permissionName: '',
+    isPublic: '',
+    copyFields: '',
+    formNo: '',
+    orderNo: '',
+    status: '',
+    content: '',
+  })
+  const plainOptions: any = ref([])
+  const { createMessage } = useMessage()
+  const permissionNameList: any = ref([])
+  function init() {
+    getTablesByClient().then((res) => {
+      permissionNameList.value = res.data
+    })
+  }
+  function ChangePermissionName(e) {
+    console.log(e)
+    let ApiData = {
+      tableViewName: e,
+    }
+    getColumnsByClient(ApiData).then((res) => {
+      plainOptions.value.splice(0)
+      res.data.forEach((e) => {
+        plainOptions.value.push({
+          field: e.dbColumnName,
+          label: e.columnDescription,
+        })
+      })
+    })
+  }
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false, loading: true })
+    isUpdate.value = !!data?.isUpdate
+    await init()
+    console.log(unref(isUpdate), 11111111111111111)
+
+    if (unref(isUpdate)) {
+      rowId.value = data.record.id
+      const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
+      if (res?.data?.content) {
+        const content = JSON.parse(res.data.content)
+        plainOptions.value = content.columns
+      }
+      formData.id = res.data.id
+      formData.templateName = res.data.templateName
+      formData.permissionId = res.data.permissionId
+      formData.permissionName = res.data.permissionName
+      formData.isPublic = res.data.isPublic
+      formData.formNo = res.data.formNo
+      formData.orderNo = res.data.orderNo
+      formData.status = res.data.status
+      formData.content = res.data.content
+      if (res.data.copyFields) {
+        checkedList.value = res.data.copyFields.split(',')
+      }
+    } else {
+      formData.id = ''
+      formData.templateName = ''
+      formData.permissionId = ''
+      formData.permissionName = ''
+      formData.isPublic = ''
+      formData.formNo = ''
+      formData.orderNo = ''
+      formData.status = ''
+      formData.content = ''
+      checkedList.value = []
+    }
+    setModalProps({ loading: false })
+  })
+
+  async function handleSave(exit) {
+    try {
+      setModalProps({ confirmLoading: true, loading: true })
+      // TODO custom api
+      if (checkedList.value && checkedList.value.length) {
+        formData.copyFields = String(checkedList.value)
+      }
+      loading.value = true
+      const res: API.DataResult = await EditFormCopy(formData)
+      loading.value = false
+      if (res.succeeded) {
+        createMessage.success(res.message)
+        emit('success')
+      } else {
+        createMessage.error(res.message)
+      }
+      exit && closeModal()
+    } finally {
+      // loading.value = false;
+      setModalProps({ confirmLoading: false, loading: false })
+    }
+  }
+</script>
+
+<style lang="scss">
+  .copy-form-model {
+    .ant-form-item-label {
+      padding-bottom: 0;
+      label {
+        font-size: 12px;
+        font-weight: 600;
+      }
+    }
+  }
+</style>
diff --git a/src/views/baseinfo/formcopy/components/Modal.vue b/src/views/baseinfo/formcopy/components/Modal.vue
index 978eacfa..a87ac84a 100644
--- a/src/views/baseinfo/formcopy/components/Modal.vue
+++ b/src/views/baseinfo/formcopy/components/Modal.vue
@@ -17,6 +17,11 @@
         <a-col :span="12">
           <a-form-item label="权限模块名称">
             <a-input v-model:value="formData.permissionName" disabled placeholder="请输入" />
+            <!-- <a-select v-model:value="formData.permissionId" @change="ChangePermissionName">
+              <a-select-option v-for="item in permissionNameList" :key="item.id" :value="item.id">
+                {{ item.permissionName }}
+              </a-select-option>
+            </a-select> -->
           </a-form-item>
         </a-col>
         <a-col :span="12">
@@ -46,19 +51,122 @@
           </a-form-item>
         </a-col>
       </a-row>
-      <a-form-item label="表单设置">
+      <!-- <a-form-item label="表单设置">
         <a-checkbox-group v-model:value="checkedList" style="width: 100%">
           <a-row>
             <a-col
               v-for="(item, index) in plainOptions"
               v-show="item.field != 'id'"
               :span="6"
-              :key="index">
+              :key="index"
+            >
               <a-checkbox :value="item.field">{{ item.label }}</a-checkbox>
             </a-col>
           </a-row>
         </a-checkbox-group>
-      </a-form-item>
+      </a-form-item> -->
+      <a-spin :spinning="formLoading">
+        <div class="basic-from basic-from-show">
+          <div class="title">
+            <span class="left"></span>
+            <span class="right"></span>
+            <span class="tip">
+              已复制表单，可<b>拖动</b>调整显示顺序
+              <template v-if="maxNum != 0">, 最多可选30条</template>
+            </span>
+          </div>
+          <div class="label-box">
+            <draggable
+              v-model="fromAllLabel"
+              animation="300"
+              @start="onStart"
+              @end="emitFromChange"
+            >
+              <transition-group>
+                <template v-for="(item, index) in fromAllLabel">
+                  <div
+                    class="label"
+                    @click="handleAddSort(item)"
+                    :key="item.field"
+                    v-if="item.label"
+                  >
+                    <span>{{ item.label }}</span>
+                    <i class="iconfont icon-guanbi" @click.stop="removeFrom(item, index)"></i>
+                  </div>
+                </template>
+              </transition-group>
+            </draggable>
+            <div class="no-data" v-if="fromAllLabel.length == 0">
+              <i class="iconfont icon-wushuju"></i>
+              <div class="no-text">请添加数据列</div>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="basic-from basic-from-show">
+          <div class="title">
+            <span class="left"></span>
+            <span class="right"></span>
+            <span class="tip"
+              >按顺序排序，可<b>拖动</b>调整排序顺序 <template v-if="maxNum != 0"></template
+            ></span>
+          </div>
+          <div class="label-box-sort">
+            <draggable v-model="sortList" animation="300" @start="onStart" @end="emitFromChange">
+              <transition-group>
+                <template v-for="(item, index) in sortList">
+                  <div
+                    class="label"
+                    style="background-color: #d1bc55"
+                    :key="index"
+                    v-if="!item.noDraggable"
+                  >
+                    <span>{{ item.title }}</span>
+                    <span class="sort">
+                      <a-icon
+                        :style="{ color: item.descSort == false ? '#409eff' : '' }"
+                        @click="handleSort(item, index, false)"
+                        type="caret-up"
+                      />
+                      <a-icon
+                        :style="{ color: item.descSort ? '#409eff' : '' }"
+                        @click="handleSort(item, index, true)"
+                        type="caret-down"
+                      />
+                    </span>
+                    <i class="iconfont icon-guanbi" @click="removeFromSort(item, index)"></i>
+                  </div>
+                </template>
+              </transition-group>
+            </draggable>
+            <div class="no-data" v-if="sortList.length == 0">
+              <i class="iconfont icon-wushuju"></i>
+              <div class="no-text">请添加数据列</div>
+            </div>
+          </div>
+        </div> -->
+        <div class="basic-from basic-from-hide">
+          <div class="title">
+            <span class="left"></span>
+            <span class="right"></span>
+            <span class="tip">未复制表单</span>
+          </div>
+          <div class="label-box all-label">
+            <div
+              class="label"
+              v-for="(item, index) in plainOptions"
+              :key="index"
+              v-show="item.label"
+            >
+              <span>{{ item.label }}</span>
+              <i class="iconfont icon-zengjia" @click="addFrom(item, index)"></i>
+            </div>
+            <div class="no-data" v-if="plainOptions.length == 0">
+              <i class="iconfont icon-meiyoudingdan"></i>
+              <div class="no-text">没有更多数据了</div>
+            </div>
+          </div>
+        </div>
+      </a-spin>
     </a-form>
 
     <!--右下角按钮-->
@@ -96,7 +204,13 @@
 <script lang="ts" setup>
   import { ref, unref, reactive, defineEmits } from 'vue'
   import { BasicModal, useModalInner } from '/@/components/Modal'
-  import { EditFormCopy, getCodeGoodsTypeInfo } from '../api'
+  import {
+    EditFormCopy,
+    getCodeGoodsTypeInfo,
+    getClientPermissionList,
+    getTablesByClient,
+    getColumnsByClient,
+  } from '../api'
   import { useMessage } from '/@/hooks/web/useMessage'
   const emit = defineEmits(['success', 'register'])
   const isUpdate = ref(true)
@@ -114,20 +228,75 @@
     formNo: '',
     orderNo: '',
     status: '',
-    content: ''
+    content: '',
   })
-  const plainOptions = ref([])
+  const plainOptions: any = ref([])
+  const fromAllLabel: any = ref([])
   const { createMessage } = useMessage()
+  const permissionNameList: any = ref([])
+  function init() {
+    getClientPermissionList().then((res) => {
+      permissionNameList.value = res.data
+    })
+  }
+  function ChangePermissionName(e) {
+    console.log(e)
+    // permissionNameList.value.forEach((item) => {
+    //   if (item.id == e) {
+    //     formData.permissionName = item.permissionName
+    //   }
+    // })
+    // let ApiData = {
+    //   permissionId: e,
+    // }
+    // getColumnsByClient(ApiData).then((res) => {
+    //   plainOptions.value.splice(0)
+    //   res.data.forEach((e) => {
+    //     plainOptions.value.push({
+    //       field: e.dbColumnName,
+    //       label: e.columnDescription,
+    //     })
+    //   })
+    // })
+  }
+  const formLoading = ref(false)
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false, loading: true })
+    formLoading.value = true
     isUpdate.value = !!data?.isUpdate
+    await init()
+    console.log(unref(isUpdate), 11111111111111111)
+
     if (unref(isUpdate)) {
       rowId.value = data.record.id
       const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
+      plainOptions.value.splice(0)
       if (res?.data?.content) {
-        const content = JSON.parse(res.data.content)
-        plainOptions.value = content.columns
+        JSON.parse(res.data.content).columns.forEach((item) => {
+          let type = true
+          res.data.copyFields.split(',').forEach((e) => {
+            if (item.field == e) {
+              type = false
+            }
+          })
+          if (type) {
+            plainOptions.value.push(item)
+          }
+        })
+        fromAllLabel.value.splice(0)
+        if (res?.data?.copyFields) {
+          res.data.copyFields.split(',').forEach((e) => {
+            JSON.parse(res.data.content).columns.forEach((item) => {
+              console.log(item, e, 11111111111)
+
+              if (item.field == e) {
+                fromAllLabel.value.push(item)
+              }
+            })
+          })
+        }
       }
+
       formData.id = res.data.id
       formData.templateName = res.data.templateName
       formData.permissionId = res.data.permissionId
@@ -141,6 +310,7 @@
         checkedList.value = res.data.copyFields.split(',')
       }
     }
+    formLoading.value = false
     setModalProps({ loading: false })
   })
 
@@ -166,9 +336,10 @@
       setModalProps({ confirmLoading: false, loading: false })
     }
   }
+  const maxNum = ref(0)
 </script>
 
-<style lang="scss">
+<style lang="less">
   .copy-form-model {
     .ant-form-item-label {
       padding-bottom: 0;
@@ -178,4 +349,182 @@
       }
     }
   }
+  .basic-from {
+    margin-bottom: 5px;
+
+    .title {
+      height: 50px;
+      line-height: 40px;
+
+      // border-bottom: 1px solid #eee;
+      .left {
+        display: none;
+        /*display: inline-block;*/
+        width: 4px;
+        height: 24px;
+        background: #409eff;
+        margin-top: 10px;
+        margin-right: 10px;
+        vertical-align: top;
+      }
+
+      .right {
+        vertical-align: top;
+        font-weight: 600;
+        font-size: 18px;
+      }
+
+      .tip {
+        font-size: 13px;
+        color: #999;
+        margin-top: 2px;
+        margin-left: 10px;
+        display: inline-block;
+        vertical-align: top;
+      }
+    }
+
+    .label-box {
+      padding-left: 10px;
+
+      // max-height: 300px;
+      // overflow: auto;
+      .label {
+        display: inline-block;
+        padding-left: 14px;
+        height: 32px;
+        line-height: 30px;
+        border-radius: 4px;
+        border: 1px dashed #ccc;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        cursor: pointer;
+
+        &:hover {
+          box-shadow: 0 0 6px #ccc;
+        }
+
+        span {
+          display: inline-block;
+          vertical-align: top;
+          max-width: 150px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        i {
+          display: inline-block;
+          vertical-align: top;
+          height: 30px;
+          line-height: 30px;
+          width: 25px;
+          text-align: center;
+          cursor: pointer;
+          margin-left: 8px;
+          margin-right: 4px;
+        }
+      }
+
+      .no-data {
+        text-align: center;
+        color: #999;
+
+        .iconfont {
+          font-size: 60px;
+          line-height: 90px;
+        }
+
+        .no-text {
+          font-size: 16px;
+          line-height: 32px;
+        }
+      }
+    }
+
+    .label-box-sort {
+      padding-left: 10px;
+
+      // max-height: 300px;
+      // overflow: auto;
+      .label {
+        display: inline-block;
+        padding-left: 14px;
+        height: 32px;
+        line-height: 30px;
+        border-radius: 4px;
+        border: 1px dashed #ccc;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        cursor: pointer;
+
+        &:hover {
+          box-shadow: 0 0 6px #ccc;
+        }
+
+        span {
+          display: inline-block;
+          vertical-align: top;
+          max-width: 150px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+
+      .no-data {
+        text-align: center;
+        color: #999;
+
+        .iconfont {
+          font-size: 60px;
+          line-height: 90px;
+        }
+
+        .no-text {
+          font-size: 16px;
+          line-height: 32px;
+        }
+      }
+    }
+
+    .all-label {
+      .label {
+        border: 1px solid #f4f4f4;
+        background: #f4f4f4;
+      }
+    }
+  }
+  .basic-from-show {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eee;
+
+    .tip {
+      b {
+        color: #bc846d;
+        margin: 0 5px;
+      }
+    }
+
+    .label {
+      background: @primary-color;
+      color: #fff;
+      border: none !important;
+    }
+  }
+
+  .basic-from-hide {
+    .label {
+      border: 1px solid @primary-color !important;
+      background: #f9fafe !important;
+
+      span {
+        color: @primary-color;
+      }
+
+      i {
+        color: @primary-color;
+      }
+    }
+  }
 </style>
diff --git a/src/views/baseinfo/formcopy/index.vue b/src/views/baseinfo/formcopy/index.vue
index 673f13a9..dc8d8f39 100644
--- a/src/views/baseinfo/formcopy/index.vue
+++ b/src/views/baseinfo/formcopy/index.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
     <BasicTable class="ds-table" @register="registerTable" @row-dbClick="handleAudit">
+      <!-- <template #tableTitle>
+        <a-button type="link" @click="handleCreate" :disabled="checkPermissions('op:formcopy:add')">
+          <span class="iconfont icon-new_document"></span>
+          添加表单复制模板
+        </a-button>
+      </template> -->
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
@@ -22,7 +28,7 @@
 <script lang="ts" setup>
   import { checkPermissions } from '/@/hooks/Permissions/index'
   import { BasicTable, useTable, TableAction } from '/@/components/Table'
-  import { getCodeGoodsTypeList } from './api'
+  import { getCodeGoodsTypeList, batchDelFormCopy } from './api'
   import { useModal } from '/@/components/Modal'
   import Modal from './components/Modal.vue'
   import { columns, searchFormSchema } from './columns'
@@ -91,6 +97,12 @@
       fixed: 'right',
     },
   })
+  function handleCreate() {
+    openModal(true, {
+      isParent: false,
+      isUpdate: false,
+    })
+  }
   function handleAudit(record: Recordable) {
     if (!checkPermissions('op:formcopy:edit')) {
       openModal(true, {