index.vue 12 KB

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