sign-admin.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <div class="hc-layout-box">
  3. <hc-new-card :scrollbar="false" action-size="lg">
  4. <template #header>
  5. <div class="w-32">
  6. <el-select v-model="searchForm.tasks" block clearable placeholder="电签任务人" size="large">
  7. <el-option v-for="item in tasksData" :label="item.dictValue" :value="item.dictKey" />
  8. </el-select>
  9. </div>
  10. <div class="w-32 ml-3">
  11. <el-select
  12. v-model="searchForm.contract" block clearable placeholder="合同段" size="large"
  13. @change="ContractIdChange"
  14. >
  15. <el-option v-for="item in contractList" :label="item.name" :value="item.id" />
  16. </el-select>
  17. </div>
  18. <div class="w-32 ml-3">
  19. <el-select v-model="searchForm.status" block clearable placeholder="电签状态" size="large">
  20. <el-option v-for="item in statusData" :label="item.dictValue" :value="item.dictKey" />
  21. </el-select>
  22. </div>
  23. <div class="w-64 ml-3">
  24. <HcDatePicker :dates="betweenTime" clearable size="large" @change="betweenTimeUpdate" />
  25. </div>
  26. <div class="w-56 ml-3">
  27. <el-input
  28. v-model="searchForm.queryValue" block clearable placeholder="请输入名称关键词检索"
  29. size="large" @keyup="keyUpEvent"
  30. />
  31. </div>
  32. <div class="ml-2">
  33. <el-button size="large" type="primary" @click="searchClick">
  34. <HcIcon name="search-2" />
  35. <span>搜索</span>
  36. </el-button>
  37. </div>
  38. </template>
  39. <template #extra>
  40. <HcTooltip keys="tasks_sign_key_renewal">
  41. <el-button hc-btn type="primary">
  42. <HcIcon name="restart" />
  43. <span>一键重签</span>
  44. </el-button>
  45. </HcTooltip>
  46. </template>
  47. <HcTable
  48. ref="tableListRef" :column="tableListColumn" :datas="tableData" :loading="tableLoading"
  49. is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
  50. @selection-change="tableSelectionChange"
  51. />
  52. <template #action>
  53. <HcPages :pages="searchForm" @change="pageChange" />
  54. </template>
  55. </hc-new-card>
  56. </div>
  57. </template>
  58. <script setup>
  59. import { onMounted, ref } from 'vue'
  60. import { useAppStore } from '~src/store'
  61. import { getArrValue, getObjValue } from 'js-fast-way'
  62. //变量
  63. const useAppState = useAppStore()
  64. const projectId = ref(useAppState.getProjectId)
  65. const contractId = ref(useAppState.getContractId)
  66. const projectInfo = ref(useAppState.getProjectInfo)
  67. //渲染完成
  68. onMounted(() => {
  69. const project = getObjValue(projectInfo.value)
  70. contractList.value = getArrValue(project['contractInfoList'])
  71. getTableData()
  72. })
  73. const tasksData = ref([])
  74. const statusData = ref([])
  75. //合同段
  76. const contractList = ref([])
  77. const ContractIdChange = () => {
  78. }
  79. //日期时间被选择
  80. const betweenTime = ref(null)
  81. const betweenTimeUpdate = ({ val, arr }) => {
  82. betweenTime.value = arr
  83. searchForm.value.startTime = val['start']
  84. searchForm.value.endTime = val['end']
  85. }
  86. //搜索表单
  87. const searchForm = ref({
  88. queryValue: null, tasks: null, contract: null, status: null, startTime: null, endTime: null,
  89. current: 1, size: 20, total: 0,
  90. })
  91. //回车搜索
  92. const keyUpEvent = (e) => {
  93. if (e.key === 'Enter') {
  94. searchForm.value.current = 1
  95. getTableData()
  96. }
  97. }
  98. //重新搜索数据
  99. const searchClick = () => {
  100. searchForm.value.current = 1
  101. getTableData()
  102. }
  103. //分页被点击
  104. const pageChange = ({ current, size }) => {
  105. searchForm.value.current = current
  106. searchForm.value.size = size
  107. getTableData()
  108. }
  109. //获取数据
  110. const tableLoading = ref(false)
  111. const tableListData = ref([])
  112. const getTableData = async () => {
  113. }
  114. //多选
  115. const tableListRef = ref(null)
  116. const tableCheckedKeys = ref([])
  117. const tableSelectionChange = (rows) => {
  118. tableCheckedKeys.value = rows.filter((item) => {
  119. return (item ?? '') !== ''
  120. })
  121. }
  122. const tableListColumn = ref([
  123. { key: 'name', name: '流程名称' },
  124. { key: 'date', name: '任务状态' },
  125. { key: 'status', name: '电签状态' },
  126. { key: 'batch', name: '审批时间' },
  127. { key: 'person', name: '电签失败原因' },
  128. { key: 'tesk', name: '上报人' },
  129. { key: 'tesk1', name: '电签任务人' },
  130. ])
  131. const tableData = ref([
  132. {
  133. num: 1,
  134. name: 'test1',
  135. date: '已审批-电签失败',
  136. status: '电签失败',
  137. batch: '2022-05-16 13:35',
  138. person: 'xxxxx原因',
  139. tesk: '李四',
  140. tesk1: '张三',
  141. },
  142. {
  143. num: 2,
  144. name: 'test2',
  145. date: '已审批-电签中',
  146. status: '电签中',
  147. batch: '2022-05-16 13:35',
  148. person: 'xxxxx原因',
  149. tesk: '李四',
  150. tesk1: '张三',
  151. },
  152. {
  153. num: 3,
  154. name: 'test3',
  155. date: '已审批完成',
  156. status: '电签完成',
  157. batch: '2022-05-16 13:35',
  158. person: 'xxxxx原因',
  159. tesk: '李四',
  160. tesk1: '张三',
  161. },
  162. {
  163. num: 4,
  164. name: 'test4',
  165. date: '已审批-电签中',
  166. status: '等待电签',
  167. batch: '2022-05-16 13:35',
  168. person: 'xxxxx原因',
  169. tesk: '李四',
  170. tesk1: '张三',
  171. },
  172. {
  173. num: 5,
  174. name: 'test5',
  175. date: 'xxxxxxxxxx',
  176. status: 'xxxx',
  177. batch: '2022-05-16 13:35',
  178. person: 'xxxxx原因',
  179. tesk: '李四',
  180. tesk1: '张三',
  181. },
  182. {
  183. num: 6,
  184. name: 'test6',
  185. date: 'xxxxxxxxxx',
  186. status: 'xxxxxx',
  187. batch: '2022-05-16 13:35',
  188. person: 'xxxxx原因',
  189. tesk: '李四',
  190. tesk1: '张三',
  191. },
  192. ])
  193. </script>
  194. <style lang="scss" scoped>
  195. .hc-layout-box {
  196. position: relative;
  197. height: 100%;
  198. }
  199. </style>