index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. <template>
  2. <div class="table_total">
  3. <div class="table_header">
  4. <!-- <p>单表</p>
  5. <el-divider></el-divider> -->
  6. <div class="imge_tab"><img src="../../../assets/images/pic_sy_ytj.png" alt="" v-if="imgShoew" ></div>
  7. <div class="table_headerBtun" v-if="queryData.buttonList">
  8. <el-button type="primary" size="mini" plain v-for="(item,index) in jeigneutwo" :key="index" @click="handleQuery(item)">{{item}}</el-button>
  9. </div>
  10. </div>
  11. <!-- 内容 -->
  12. <div class="table_nav headertable_nav">
  13. <el-collapse v-model="activeNames" @change="handleChange">
  14. <el-form :model="queryParams" :rules="queryData.rules" ref="queryForm" :inline="true" label-width="120px">
  15. <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData" :key="index">
  16. <el-row>
  17. <el-col :span="24" :key="index">
  18. <dynamic-forms @modelFn="modelFn" :ref="items.columnName" :config="queryParams" @inputs="changeFn" :formConfig="items" v-for="(items,indexs) in item.hrChildren"
  19. :key='indexs' />
  20. </el-col>
  21. </el-row>
  22. </el-collapse-item>
  23. </el-form>
  24. </el-collapse>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. import {
  30. getTableQuery,
  31. getQueryList,
  32. tableSubimt,
  33. tableSubimtanit,
  34. addbjectSave,
  35. delMenutab
  36. } from '@/api/system/table.js'
  37. export default {
  38. name: "index",
  39. inject: ['reload'],
  40. data() {
  41. return {
  42. // 显示搜索条件
  43. showSearch: true,
  44. activeNames: [0],
  45. title: '单表1',
  46. tabledeLise: {
  47. table: '',
  48. isUi: true
  49. },
  50. queryData: {},
  51. // 查询参数
  52. queryParams: {
  53. },
  54. labletit: '查询参数1233',
  55. tableZbie:{
  56. table:'',
  57. isUi:true,
  58. fixedData:{
  59. id:-1
  60. }
  61. },
  62. taleLisst:[],
  63. forme:{
  64. table:'',
  65. objId:-1,
  66. fixedData:{}
  67. },
  68. formeanti:{
  69. table:'',
  70. commitData:[],
  71. },
  72. formy:{
  73. id:0,
  74. status:1
  75. },
  76. // 删除参数
  77. deledlid:{
  78. table:'',
  79. idList:[]
  80. },
  81. jeigneu:[],
  82. jeigneutwo:[],
  83. xidugje:0,
  84. tijeq:0,
  85. imgShoew:false
  86. };
  87. },
  88. // filters:{
  89. // btnConversion(val) {
  90. // switch(val){
  91. // case 'A':
  92. // return '保存';
  93. // case 'M':
  94. // return '保存';
  95. // case 'D':
  96. // return '删除';
  97. // case 'Q':
  98. // return '查询';
  99. // case 'S':
  100. // return '提交';
  101. // case 'U':
  102. // return '反提交';
  103. // case 'I':
  104. // return '导入';
  105. // case 'E':
  106. // return '导出';
  107. // }
  108. // }
  109. // },
  110. mounted() {
  111. // this.tableZbie.fixedData.id = 0
  112. this.deledlid.idList = []
  113. this.formeanti.table = this.$route.query.tables
  114. // this.formeanti.id = this.$route.query.id
  115. this.forme.table = this.$route.query.tables
  116. this.forme.objId = this.$route.query.id
  117. this.tableZbie.table = this.$route.query.tables
  118. this.tableZbie.fixedData.id = this.$route.query.id
  119. this.formy.id = this.$route.query.id
  120. this.deledlid.table = this.$route.query.tables
  121. this.deledlid.idList.push(this.$route.query.id)
  122. this.init()
  123. // this.tablsie()
  124. },
  125. methods: {
  126. modelFn(obj, cont) {
  127. this.$set(this.queryParams,obj,cont)
  128. },
  129. changeFn(obj) {
  130. for (let key in obj) {
  131. this.queryParams[key] = obj[key]
  132. }
  133. },
  134. resetQuery() {
  135. },
  136. /** 搜索按钮操作 */
  137. handleQuery(index) {
  138. for (let item of this.queryData.showData) {
  139. for (var i = 0; i < item.hrChildren.length; i++) {
  140. if (item.hrChildren[i].htmlType == 'checkbox') {
  141. this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config
  142. } else if (item.hrChildren[i].htmlType == 'imageUpload' || item.hrChildren[i].htmlType == 'fileUpload') {
  143. if (this.$refs[item.hrChildren[i].columnName][0].config.length) {
  144. this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
  145. }
  146. } else {
  147. this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[
  148. item.hrChildren[i].columnName]
  149. }
  150. }
  151. }
  152. if (this.queryParams.pageNum !== undefined) {
  153. this.queryParams.pageNum = undefined
  154. }
  155. if (this.queryParams.pageSize !== undefined) {
  156. this.queryParams.pageSize = undefined
  157. }
  158. if (index == '删除') {
  159. //删除
  160. console.log(this.formy.id)
  161. this.handleDelete(this.deledlid)
  162. } else if (index == '提交') {
  163. //提交 保存
  164. this.formeanti.commitData = []
  165. this.formy.status = 1
  166. this.formeanti.commitData.push(this.formy)
  167. this.antiSubmission()
  168. } else if (index == '反提交') {
  169. //反提交 保存
  170. this.formeanti.commitData = []
  171. this.formy.status = 2
  172. this.formeanti.commitData.push(this.formy)
  173. this.antiSubmission()
  174. } else if (index == '保存') {
  175. // 修改
  176. // this.xidugje = '保存'
  177. this.forme.fixedData = this.queryParams
  178. this.submitForm()
  179. } else if (index == '新增') {
  180. //新增
  181. this.$router.push({
  182. path: '/business/table',
  183. query: {
  184. id: -1,
  185. tables: this.forme.table
  186. },
  187. })
  188. // // this.forme.objId = "-1"
  189. // this.queryParams = {}
  190. this.xidugje = 0
  191. // this.tableZbie.fixedData.id = -1
  192. // this.formy.id = '-1'
  193. // this.init()
  194. this.reload()
  195. } else if (index == '返回') {
  196. // if (this.xidugje == 0) {
  197. // this.$router.go(-2)
  198. // } else {
  199. this.$router.go(-1)
  200. // }
  201. } else if (index == '刷新') {
  202. this.xidugje = 1
  203. this.reload()
  204. }
  205. console.log(this.forme)
  206. // this.getList();
  207. },
  208. getList() {
  209. },
  210. init() {
  211. getTableQuery(
  212. this.tableZbie
  213. ).then(res => {
  214. let data = res.data
  215. console.log(res.data)
  216. this.queryData = {}
  217. this.queryData = data
  218. // imgShoew
  219. this.jeigneutwo = []
  220. this.jeigneu = []
  221. this.jeigneu = data.buttonList.split('')
  222. console.log(data.buttonList)
  223. console.log(this.jeigneu)
  224. this.jeigneu.filter(route => {
  225. // route.dept_id = route.dept_id.value
  226. console.log(route)
  227. if(route == 'A'){
  228. if(this.formy.id == -1){
  229. route = '保存'
  230. this.jeigneutwo.push(route)
  231. }else{
  232. route = '新增'
  233. }
  234. }else if(route == 'M'){
  235. route = '保存'
  236. if(this.formy.id != -1){
  237. this.jeigneutwo.push(route)
  238. }
  239. }else if(route == 'D'){
  240. route = '删除'
  241. if(this.formy.id != -1){
  242. this.jeigneutwo.push(route)
  243. }
  244. }else if(route == 'Q'){
  245. route = '查询'
  246. this.jeigneutwo.push(route)
  247. }else if(route == 'S'){
  248. route = '提交'
  249. if(this.formy.id != -1){
  250. this.jeigneutwo.push(route)
  251. }
  252. }else if(route == 'U'){
  253. route = '反提交'
  254. if(this.formy.id != -1){
  255. this.jeigneutwo.push(route)
  256. }
  257. }else if(route == 'I'){
  258. route = '导入'
  259. this.jeigneutwo.push(route)
  260. }else if(route == 'E'){
  261. route = '导出'
  262. this.jeigneutwo.push(route)
  263. }
  264. })
  265. this.jeigneutwo.push('刷新')
  266. this.jeigneutwo.push('返回')
  267. // console.log(this.jeigneutwo,567)
  268. // console.log(this.xidugje)
  269. if(this.xidugje == '刷新'){
  270. if(res.code == 200){
  271. this.msgSuccess("操作成功");
  272. }
  273. }
  274. // 图片的显示隐藏
  275. if(this.queryData.showData.length !==0){
  276. this.queryData.showData.filter(route => {
  277. if(route.hrChildren.length !== 0){
  278. if(route.hrChildren[1].readonly == true){
  279. this.imgShoew = true
  280. }else{
  281. this.imgShoew = false
  282. }
  283. }
  284. })
  285. }
  286. })
  287. },
  288. tablsie() {
  289. console.log(1234)
  290. getQueryList(
  291. this.tabledeLise
  292. ).then(res => {
  293. let data = res.data
  294. this.taleLisst = data
  295. // console.log(this.queryData.queryList)
  296. })
  297. },
  298. handleChange(val) {
  299. console.log(val);
  300. },
  301. // 按钮点击
  302. delet(index) {
  303. console.log(index)
  304. if (index == 'D') {
  305. this.handleDelete(this.formy.id)
  306. }
  307. },
  308. /** 新增 修改提交按钮 */
  309. submitForm: function() {
  310. this.$refs["queryForm"].validate(valid => {
  311. if (valid) {
  312. addbjectSave(this.forme).then(response => {
  313. this.msgSuccess("保存成功");
  314. this.open = false;
  315. console.log(this.xidugje)
  316. this.$router.go(-1)
  317. });
  318. }
  319. });
  320. },
  321. // 提交反提交
  322. antiSubmission() {
  323. this.$refs["queryForm"].validate(valid => {
  324. if (valid) {
  325. if (this.formy.status == 1) {
  326. // 提交
  327. tableSubimt(this.formeanti).then(response => {
  328. this.msgSuccess("提交成功");
  329. this.$router.go(-1)
  330. // this.open = false;
  331. // this.getList();
  332. });
  333. } else if (this.formy.status == 2) {
  334. // 反提交
  335. tableSubimtanit(this.formeanti).then(response => {
  336. this.msgSuccess("反提交成功");
  337. this.$router.go(-1)
  338. // this.open = false;
  339. // this.getList();
  340. });
  341. }
  342. }
  343. });
  344. },
  345. //删除
  346. handleDelete(index) {
  347. this.$confirm('是否确认删除', "警告", {
  348. confirmButtonText: "确定",
  349. cancelButtonText: "取消",
  350. type: "warning"
  351. }).then(function() {
  352. return delMenutab(index);
  353. }).then(() => {
  354. // this.getList();
  355. this.msgSuccess("删除成功");
  356. this.$router.go(-1)
  357. })
  358. }
  359. },
  360. };
  361. </script>
  362. <style lang="scss">
  363. .table_header{
  364. position: relative;
  365. .el-divider--horizontal{
  366. margin-top: 16px;
  367. }
  368. }
  369. .headertable_nav{
  370. .el-collapse-item__wrap{
  371. border-bottom: 0;
  372. }
  373. .el-collapse-item__header{
  374. border-bottom: 0;
  375. font-size: 15px;
  376. font-family: PingFang SC;
  377. font-weight: bold;
  378. color: #3C8DBC;
  379. line-height: 36px;
  380. }
  381. // .el-form-item__content{
  382. // width: 55%;
  383. // }
  384. .el-collapse{
  385. border-top: 0;
  386. }
  387. }
  388. </style>
  389. <style scoped lang="scss">
  390. .app-main{
  391. // background-color: #eef0ff !important;
  392. }
  393. .table_total{
  394. background-color: #eef0ff;
  395. height: 100%;
  396. padding: 20px;
  397. // 头部
  398. .table_header{
  399. background-color: #fff;
  400. border-radius: 6px;
  401. padding: 23px;
  402. margin-bottom: 20px;
  403. p{
  404. font-size: 15px;
  405. font-weight: bold;
  406. color: #3C8DBC;
  407. line-height: 36px;
  408. }
  409. p::before{
  410. content: "";
  411. display: block;
  412. width: 18px;
  413. height: 8px;
  414. background: #3C8DBC;
  415. border-radius: 3px;
  416. }
  417. }
  418. // 内容
  419. .headertable_nav{
  420. background-color: #fff;
  421. border-radius: 6px;
  422. padding: 23px;
  423. }
  424. }
  425. p{
  426. margin: 0;
  427. }
  428. .imge_tab{
  429. position: absolute;
  430. right: 0;
  431. top: 5px;
  432. }
  433. </style>
  434. <style scoped lang="scss">
  435. .app-main {
  436. // background-color: #eef0ff !important;
  437. }
  438. .table_total {
  439. background-color: #eef0ff;
  440. height: 100%;
  441. padding: 20px;
  442. // 头部
  443. .table_header {
  444. background-color: #fff;
  445. border-radius: 6px;
  446. padding: 23px;
  447. margin-bottom: 20px;
  448. p {
  449. font-size: 15px;
  450. font-weight: bold;
  451. color: #3C8DBC;
  452. line-height: 36px;
  453. }
  454. p::before {
  455. content: "";
  456. display: block;
  457. width: 18px;
  458. height: 8px;
  459. background: #3C8DBC;
  460. border-radius: 3px;
  461. }
  462. }
  463. // 内容
  464. .headertable_nav {
  465. background-color: #fff;
  466. border-radius: 6px;
  467. padding: 23px;
  468. }
  469. }
  470. p {
  471. margin: 0;
  472. }
  473. </style>