crud.tsx 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. import * as api from './api';
  2. import * as companyApi from '../company/api';
  3. import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
  4. import { dictionary } from '/@/utils/dictionary';
  5. import { successMessage } from '/@/utils/message';
  6. import { auth } from '/@/utils/authFunction';
  7. import { useRouter } from 'vue-router';
  8. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  9. const router = useRouter();
  10. const pageRequest = async (query: UserPageQuery) => {
  11. return await api.GetList(query);
  12. };
  13. const editRequest = async ({ form, row }: EditReq) => {
  14. form.id = row.id;
  15. return await api.UpdateObj(form);
  16. };
  17. const delRequest = async ({ row }: DelReq) => {
  18. return await api.DelObj(row.id);
  19. };
  20. const addRequest = async ({ form }: AddReq) => {
  21. form.document_link = form.document_link[0];
  22. return await api.AddObj(form);
  23. };
  24. const handleViewContract = (row: any) => {
  25. console.log(row.document_link);
  26. router.push({
  27. path: '/system/contract/preview',
  28. query: {
  29. file: row.document_link,
  30. contractName: row.contract_name
  31. }
  32. });
  33. };
  34. return {
  35. crudOptions: {
  36. toolbar:{
  37. buttons:{
  38. search:{show:false},
  39. refresh:{show:false},
  40. compact:{show:false},
  41. export:{
  42. text: '导出',
  43. type: 'primary',
  44. size: 'small',
  45. icon: 'upload',
  46. circle: false,
  47. display: true,
  48. show:false
  49. },
  50. columns:{
  51. show:false
  52. },
  53. }
  54. },
  55. search: {
  56. col: { span: 3 },
  57. show: true,
  58. autoSearch:false,
  59. buttons: {
  60. search: {
  61. size: 'small',
  62. },
  63. reset: {
  64. size: 'small',
  65. }
  66. }
  67. },
  68. request: {
  69. pageRequest,
  70. addRequest,
  71. editRequest,
  72. delRequest,
  73. },
  74. actionbar: {
  75. buttons: {
  76. add: {
  77. show: true,
  78. },
  79. },
  80. },
  81. rowHandle: {
  82. fixed: 'right',
  83. width: 200,
  84. buttons: {
  85. view: { text: '详细信息', iconRight: 'View', type: 'text', show: true },
  86. edit: { iconRight: 'Edit', type: 'text', show: false },
  87. remove: { iconRight: 'Delete', type: 'text', show: false },
  88. Viewcontract: {
  89. text:'查看合约',
  90. iconRight:'',
  91. type:'text',
  92. show:true,
  93. click: (opts: any) => {
  94. handleViewContract(opts.row);
  95. }
  96. },
  97. },
  98. },
  99. columns: {
  100. _index: {
  101. title: '序号',
  102. form: { show: false },
  103. column: { type: 'index', align: 'center', width: '70px', columnSetDisabled: true },
  104. },
  105. search:{
  106. title: '关键字搜索',
  107. search: { show: true,type: 'input', },
  108. type: 'input',
  109. form: {
  110. component: { placeholder: '请输入' },
  111. show:false},
  112. column: {show:false}
  113. },
  114. contract_no: {
  115. title: '合约编号',
  116. search: { show: true },
  117. type: 'input',
  118. form: {
  119. rules: [{ required: true, message: '合约编号必填' }],
  120. component: { placeholder: '请输入合约编号' }
  121. },
  122. column: { minWidth: 150 },
  123. },
  124. document_link: {
  125. title: '合约文档',
  126. type: 'file-uploader',
  127. form: {
  128. /* rules: [{ required: true, message: '请上传合约文档' }], */
  129. component: {
  130. uploader: {
  131. type: 'form',
  132. action: '/api/uploadfile/',
  133. accept: '.pdf,.doc,.docx',
  134. maxSize: 10 * 1024 * 1024, // 10MB
  135. limit: 1,
  136. },
  137. placeholder: '请上传PDF或Word格式的合约文档',
  138. helpMessage: '支持PDF、Word格式,文件大小不超过10MB'
  139. }
  140. },
  141. column: {
  142. show:false,
  143. component: {
  144. // 自定义显示
  145. render: ({ value }) => {
  146. if (!value) return '未上传';
  147. const fileName = value.split('/').pop();
  148. return <el-link type="primary" href={value} target="_blank">{fileName}</el-link>;
  149. }
  150. },
  151. minWidth: 180
  152. }
  153. },
  154. title: {
  155. title: '合约名称',
  156. search: { show: true },
  157. type: 'input',
  158. form: {
  159. rules: [{ required: true, message: '合约名称必填' }],
  160. component: { placeholder: '请输入合约名称' }
  161. },
  162. column: { minWidth: 180 },
  163. },
  164. tenant: {
  165. title: '企业名称',
  166. search: { show: true },
  167. type: 'dict-select',
  168. dict: dict({
  169. url: '/api/platform/tenants/',
  170. value: 'tenant_id',
  171. label: 'name',
  172. getData: (url) => {
  173. return companyApi.GetList({ page: 1, limit: 20 }).then((res:any) => {
  174. return res.data.results;
  175. });
  176. }
  177. }),
  178. form: {
  179. rules: [{ required: true, message: '企业名称必填' }],
  180. component: {
  181. placeholder: '请选择企业名称',
  182. filterable: true,
  183. clearable: true
  184. }
  185. },
  186. column: { minWidth: 120 },
  187. },
  188. total_amount: {
  189. title: '合约金额',
  190. type: 'number',
  191. form: {
  192. rules: [{ required: true, message: '合约金额必填' }],
  193. component: {
  194. placeholder: '请输入合约金额',
  195. precision: 2,
  196. step: 1000
  197. }
  198. },
  199. column: { minWidth: 120 },
  200. },
  201. effective_date: {
  202. title: '开始时间',
  203. type: 'datetime',
  204. search: { show: true },
  205. form: {
  206. rules: [{ required: true, message: '开始时间必填' }],
  207. component: {
  208. type: 'datetime',
  209. valueFormat: 'YYYY-MM-DD',placeholder: '请选择开始时间' }
  210. },
  211. column: { minWidth: 150 },
  212. },
  213. expire_date: {
  214. title: '结束时间',
  215. type: 'datetime',
  216. search: { show: true },
  217. form: {
  218. rules: [{ required: true, message: '结束时间必填' }],
  219. component: { type: 'datetime',
  220. valueFormat: 'YYYY-MM-DD',placeholder: '请选择结束时间' }
  221. },
  222. column: { minWidth: 150 },
  223. },
  224. status: {
  225. title: '合约状态',
  226. search: { show: true },
  227. type: 'dict-select',
  228. form: {
  229. rules: [{ required: true, message: '合约状态必填' }],
  230. component: { placeholder: '请选择合约状态' }
  231. },
  232. column: { minWidth: 120 },
  233. dict: dict({
  234. data: [
  235. { value: 1, label: '服务中' },
  236. { value: 2, label: '试用中' },
  237. { value: 0, label: '已停用' }
  238. ]
  239. }),
  240. },
  241. party_b_contact: {
  242. title: '联系人',
  243. type: 'input',
  244. form: {
  245. rules: [{ required: true, message: '联系人必填' }],
  246. component: { placeholder: '请输入联系人姓名' }
  247. },
  248. column: { minWidth: 120 },
  249. },
  250. party_b_phone: {
  251. title: '联系电话',
  252. type: 'input',
  253. form: {
  254. rules: [
  255. { required: true, message: '联系电话必填' },
  256. { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
  257. ],
  258. component: { placeholder: '请输入联系电话' }
  259. },
  260. column: { minWidth: 130 },
  261. },
  262. /* contact_email: {
  263. title: '联系邮箱',
  264. type: 'input',
  265. form: {
  266. rules: [
  267. { required: true, message: '联系邮箱必填' },
  268. { type: 'email', message: '请输入正确的邮箱格式' }
  269. ],
  270. component: { placeholder: '请输入联系邮箱' }
  271. },
  272. column: { minWidth: 180 },
  273. }, */
  274. contract_type_display: {
  275. title: '服务描述',
  276. type: 'textarea',
  277. form: {
  278. rules: [{ required: true, message: '服务描述必填' }],
  279. component: {
  280. placeholder: '请输入服务描述',
  281. showWordLimit: true,
  282. maxlength: 500,
  283. rows: 3
  284. }
  285. },
  286. column: { minWidth: 200 },
  287. },
  288. /* payment_method: {
  289. title: '支付方式',
  290. type: 'dict-select',
  291. form: {
  292. rules: [{ required: true, message: '支付方式必填' }],
  293. component: { placeholder: '请选择支付方式' }
  294. },
  295. column: { minWidth: 120 },
  296. dict: dict({
  297. data: [
  298. { value: 1, label: '一次性付款' },
  299. { value: 2, label: '分期付款' },
  300. { value: 3, label: '其他' }
  301. ]
  302. }),
  303. }, */
  304. remark: {
  305. title: '备注',
  306. type: 'textarea',
  307. form: {
  308. component: {
  309. placeholder: '请输入备注',
  310. showWordLimit: true,
  311. maxlength: 200,
  312. rows: 2
  313. }
  314. },
  315. column: { minWidth: 200 },
  316. },
  317. },
  318. },
  319. };
  320. };