index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  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">
  7. <img src="../../../assets/images/pic_sy_ytj.png" alt="" v-if="imgShoew == 2" >
  8. <img src="../../../assets/images/pic_sy_shz.png" alt="" v-if="imgShoew == 4" >
  9. <img src="../../../assets/images/pic_sy_ybh.png" alt="" v-if="imgShoew == 3" >
  10. </div>
  11. <div class="table_headerBtun table_headerBtuntwo" v-if="queryData.buttonList">
  12. <el-button type="primary" size="mini" plain v-for="(item,index) in jeigneutwo" :key="index" @click="handleQuery(item)">{{item}}</el-button>
  13. </div>
  14. </div>
  15. <!-- 内容 -->
  16. <div class="table_nav headertable_nav table_forem" >
  17. <el-collapse v-model="activeNames" @change="handleChange">
  18. <el-form :model="queryParams" :rules="queryData.rules" ref="queryForm" :inline="true" :label-width="this.queryData.table_column == 6 ? '70px' :'110px'" >
  19. <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData" :key="index">
  20. <dynamic-formsteo @iChange="iChange" :queryData="queryData" @modelFn="modelFn" :ref="items.columnName" :config="queryParams" @inputs="changeFn" :formConfig="items" v-for="(items,indexs) in item.hrChildren"
  21. :key='indexs' />
  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:0,
  86. tablees:-1,
  87. juegkae:'',
  88. tabdiese:''
  89. };
  90. },
  91. mounted() {
  92. // this.tableZbie.fixedData.id = 0
  93. this.deledlid.idList = []
  94. this.formeanti.table = this.$route.query.tables
  95. // this.formeanti.id = this.$route.query.id
  96. this.forme.table = this.$route.query.tables
  97. this.forme.objId = this.$route.query.id
  98. this.tableZbie.table = this.$route.query.tables
  99. this.tableZbie.fixedData.id = this.$route.query.id
  100. this.formy.id = this.$route.query.id
  101. this.deledlid.table = this.$route.query.tables
  102. this.deledlid.idList.push(this.$route.query.id)
  103. if(this.$route.query.tabfe){
  104. this.tablees = this.$route.query.tabfe
  105. this.juegkae = this.$route.query.tabik + '_id'
  106. this.tabdiese = this.$route.query.tabik
  107. console.log(this.juegkae)
  108. }else{
  109. this.tablees = undefined
  110. this.juegkae = undefined
  111. this.tabdiese = this.$route.query.tabik
  112. }
  113. this.init()
  114. // this.tablsie()
  115. },
  116. methods: {
  117. iChange(name,val){
  118. for(let item of this.queryData.showData){
  119. for(let itemChild of item.hrChildren){
  120. if(itemChild.columnName == name){
  121. itemChild.columnValue = (val?val:null)
  122. }
  123. }
  124. }
  125. },
  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 if (item.hrChildren[i].htmlType == 'datetime') {
  147. if (this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]) {
  148. this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]
  149. }else{
  150. this.queryParams[item.hrChildren[i].columnName] = null
  151. }
  152. } else {
  153. this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[
  154. item.hrChildren[i].columnName]
  155. }
  156. }
  157. }
  158. if (this.queryParams.pageNum !== undefined) {
  159. this.queryParams.pageNum = undefined
  160. }
  161. if (this.queryParams.pageSize !== undefined) {
  162. this.queryParams.pageSize = undefined
  163. }
  164. if (index == '删除') {
  165. //删除
  166. this.handleDelete(this.deledlid)
  167. } else if (index == '提交') {
  168. //提交 保存
  169. this.formeanti.commitData = []
  170. this.formy.status = 1
  171. this.formeanti.commitData.push(this.formy)
  172. this.antiSubmission()
  173. } else if (index == '反提交') {
  174. //反提交 保存
  175. this.formeanti.commitData = []
  176. this.formy.status = 2
  177. this.formeanti.commitData.push(this.formy)
  178. this.antiSubmission()
  179. } else if (index == '保存') {
  180. // 修改
  181. this.forme.fixedData = this.queryParams
  182. this.forme.fixedData[this.juegkae] = this.tablees
  183. this.submitForm()
  184. } else if (index == '新增') {
  185. //新增
  186. this.xidugje = 0
  187. this.reload()
  188. } else if (index == '返回') {
  189. this.$store.dispatch("tagsView/delView", this.$route);
  190. this.$router.go(-1)
  191. } else if (index == '刷新') {
  192. this.xidugje = 1
  193. this.reload()
  194. }
  195. // this.getList();
  196. },
  197. getList() {
  198. },
  199. init() {
  200. getTableQuery(
  201. this.tableZbie
  202. ).then(res => {
  203. let data = res.data
  204. this.queryData = {}
  205. this.queryData = data
  206. // imgShoew
  207. this.jeigneutwo = []
  208. this.jeigneu = []
  209. this.jeigneu = data.buttonList.split('')
  210. // console.log(data.buttonList)
  211. this.jeigneu.filter(route => {
  212. if(route == 'A'){
  213. if(this.formy.id == -1){
  214. route = '保存'
  215. this.jeigneutwo.push(route)
  216. }else{
  217. route = '新增'
  218. }
  219. }else if(route == 'M'){
  220. route = '保存'
  221. if(this.formy.id != -1){
  222. this.jeigneutwo.push(route)
  223. }
  224. }else if(route == 'D'){
  225. route = '删除'
  226. if(this.formy.id != -1){
  227. this.jeigneutwo.push(route)
  228. }
  229. }else if(route == 'Q'){
  230. route = '查询'
  231. this.jeigneutwo.push(route)
  232. }else if(route == 'S'){
  233. route = '提交'
  234. if(this.formy.id != -1){
  235. this.jeigneutwo.push(route)
  236. }
  237. }else if(route == 'U'){
  238. route = '反提交'
  239. if(this.formy.id != -1){
  240. this.jeigneutwo.push(route)
  241. }
  242. }else if(route == 'I'){
  243. route = '导入'
  244. this.jeigneutwo.push(route)
  245. }else if(route == 'E'){
  246. route = '导出'
  247. this.jeigneutwo.push(route)
  248. }
  249. })
  250. this.jeigneutwo.push('刷新')
  251. this.jeigneutwo.push('返回')
  252. if(this.xidugje == '刷新'){
  253. if(res.code == 200){
  254. this.msgSuccess("操作成功");
  255. }
  256. }
  257. // 图片的显示隐藏
  258. if(this.queryData.showData.length !==0){
  259. this.queryData.showData.filter(route => {
  260. route.hrChildren.filter(routerst =>{
  261. if(this.queryData.table_column == undefined){
  262. this.queryData.table_column = null
  263. }
  264. routerst.tableColumnuy = this.queryData.table_column
  265. })
  266. if(route.cssClass !== null){
  267. this.imgShoew = route.cssClass
  268. if(route.cssClass == 2 || route.cssClass == 4){
  269. route.hrChildren.filter(routers =>{
  270. routers.isonliy = true
  271. })
  272. }else{
  273. route.hrChildren.filter(routers =>{
  274. routers.isonliy = false
  275. })
  276. }
  277. }
  278. })
  279. }
  280. })
  281. },
  282. tablsie() {
  283. getQueryList(
  284. this.tabledeLise
  285. ).then(res => {
  286. let data = res.data
  287. this.taleLisst = data
  288. })
  289. },
  290. handleChange(val) {
  291. },
  292. // 按钮点击
  293. delet(index) {
  294. if (index == 'D') {
  295. this.handleDelete(this.formy.id)
  296. }
  297. },
  298. /** 新增 修改提交按钮 */
  299. submitForm: function() {
  300. this.$refs["queryForm"].validate(valid => {
  301. if (valid) {
  302. console.log(this.forme)
  303. addbjectSave(this.forme).then(response => {
  304. this.msgSuccess("保存成功");
  305. this.$store.dispatch("tagsView/delView", this.$route);
  306. this.$router.go(-1)
  307. });
  308. }
  309. });
  310. },
  311. // 提交反提交
  312. antiSubmission() {
  313. this.$refs["queryForm"].validate(valid => {
  314. if (valid) {
  315. if (this.formy.status == 1) {
  316. // 提交
  317. tableSubimt(this.formeanti).then(response => {
  318. this.msgSuccess("提交成功");
  319. this.$store.dispatch("tagsView/delView", this.$route);
  320. this.$router.go(-1)
  321. // this.getList();
  322. });
  323. } else if (this.formy.status == 2) {
  324. // 反提交
  325. tableSubimtanit(this.formeanti).then(response => {
  326. this.msgSuccess("反提交成功");
  327. this.$store.dispatch("tagsView/delView", this.$route);
  328. this.$router.go(-1)
  329. // this.getList();
  330. });
  331. }
  332. }
  333. });
  334. },
  335. //删除
  336. handleDelete(index) {
  337. this.$confirm('是否确认删除', "警告", {
  338. confirmButtonText: "确定",
  339. cancelButtonText: "取消",
  340. type: "warning"
  341. }).then(function() {
  342. return delMenutab(index);
  343. }).then(() => {
  344. // this.getList();
  345. this.msgSuccess("删除成功");
  346. this.$store.dispatch("tagsView/delView", this.$route);
  347. this.$router.go(-1)
  348. })
  349. }
  350. },
  351. };
  352. </script>
  353. <style lang="scss">
  354. .table_header{
  355. position: relative;
  356. .el-divider--horizontal{
  357. margin-top: 16px;
  358. }
  359. }
  360. .table_forem{
  361. .el-form--inline .el-form-item{
  362. width: 100% !important;
  363. }
  364. .el-select{
  365. width: 100%;
  366. }
  367. .el-date-editor.el-input{
  368. width: 100% !important;
  369. }
  370. .el-form-item--medium .el-form-item__content{
  371. width: 70%;
  372. }
  373. }
  374. .headertable_nav{
  375. .el-collapse-item__wrap{
  376. border-bottom: 0;
  377. }
  378. .el-collapse-item__header{
  379. border-bottom: 0;
  380. font-size: 15px;
  381. font-family: PingFang SC;
  382. font-weight: bold;
  383. color: #3C8DBC;
  384. line-height: 36px;
  385. }
  386. // .el-form-item__content{
  387. // width: 55%;
  388. // }
  389. .el-collapse{
  390. border-top: 0;
  391. }
  392. }
  393. </style>
  394. <style scoped lang="scss">
  395. .app-main{
  396. // background-color: #eef0ff !important;
  397. }
  398. .table_total{
  399. background-color: #eef0ff;
  400. height: 100%;
  401. padding: 20px;
  402. // 头部
  403. .table_header{
  404. background-color: #fff;
  405. border-radius: 6px;
  406. padding: 13px;
  407. margin-bottom: 10px;
  408. p{
  409. font-size: 15px;
  410. font-weight: bold;
  411. color: #3C8DBC;
  412. line-height: 36px;
  413. }
  414. p::before{
  415. content: "";
  416. display: block;
  417. width: 18px;
  418. height: 8px;
  419. background: #3C8DBC;
  420. border-radius: 3px;
  421. }
  422. .table_headerBtuntwo{
  423. margin-bottom: 0 !important;
  424. }
  425. }
  426. // 内容
  427. .headertable_nav{
  428. background-color: #fff;
  429. border-radius: 6px;
  430. padding: 23px;
  431. }
  432. }
  433. p{
  434. margin: 0;
  435. }
  436. .imge_tab{
  437. position: absolute;
  438. right: 0;
  439. top: 5px;
  440. }
  441. </style>
  442. <style scoped lang="scss">
  443. .app-main {
  444. // background-color: #eef0ff !important;
  445. }
  446. .table_total {
  447. background-color: #eef0ff;
  448. height: 100%;
  449. padding: 20px;
  450. // 头部
  451. .table_header {
  452. background-color: #fff;
  453. border-radius: 6px;
  454. padding: 13px;
  455. margin-bottom: 10px;
  456. p {
  457. font-size: 15px;
  458. font-weight: bold;
  459. color: #3C8DBC;
  460. line-height: 36px;
  461. }
  462. p::before {
  463. content: "";
  464. display: block;
  465. width: 18px;
  466. height: 8px;
  467. background: #3C8DBC;
  468. border-radius: 3px;
  469. }
  470. }
  471. // 内容
  472. .headertable_nav {
  473. background-color: #fff;
  474. border-radius: 6px;
  475. padding: 23px;
  476. padding-top: 0;
  477. }
  478. }
  479. p {
  480. margin: 0;
  481. }
  482. </style>