voidList.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. <template>
  2. <div class="app-container calendar-list-container exchangeView">
  3. <!-- 查询和其他操作 -->
  4. <div class="filter-container">
  5. <el-input clearable class="filter-item" style="width: 200px;" placeholder="员工名称"
  6. v-model="listQuery.purchaser"></el-input>
  7. <el-input clearable class="filter-item" style="width: 200px;" placeholder="订单编号"
  8. v-model="listQuery.orderSeq"></el-input>
  9. <el-input clearable class="filter-item" style="width: 200px;" placeholder="活动标题"
  10. v-model="listQuery.title"></el-input>
  11. <el-select v-model="listQuery.productAttribute" clearable placeholder="商品属性" class="filter-item" style="width: 200px">
  12. <el-option :key="item.dictValue" v-for="item in productAttributeList" :label="item.dictLabel"
  13. :value="item.dictValue">
  14. </el-option>
  15. </el-select>
  16. <el-select v-model="listQuery.deliveryType" clearable placeholder="兑换方式" class="filter-item" style="width: 200px">
  17. <el-option :key="item.dictValue" v-for="item in deliveryTypeList" :label="item.dictLabel" :value="item.dictValue">
  18. </el-option>
  19. </el-select>
  20. <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
  21. <el-button class="filter-item" type="primary" v-waves icon="el-icon-download" @click="handleDownLoad">导出</el-button>
  22. </div>
  23. <!-- 查询结果 -->
  24. <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
  25. highlight-current-row>
  26. <el-table-column type="index" label="序号" header-align="center" align="center">
  27. </el-table-column>
  28. <el-table-column align="center" min-width="200px" label="部门名称" prop="deptName">
  29. </el-table-column>
  30. <el-table-column align="center" min-width="80px" label="员工名称" prop="purchaser">
  31. </el-table-column>
  32. <el-table-column align="center" min-width="150px" label="员工号" prop="employeNo">
  33. </el-table-column>
  34. <el-table-column align="center" min-width="150px" label="手机号" prop="userPhone">
  35. </el-table-column>
  36. <el-table-column align="center" min-width="150px" label="工作地点" prop="workplace">
  37. </el-table-column>
  38. <el-table-column align="center" min-width="150px" label="订单编号" prop="orderSeq">
  39. </el-table-column>
  40. <el-table-column align="center" min-width="120px" label="订单状态" prop="orderTypeName">
  41. </el-table-column>
  42. <el-table-column align="center" min-width="200px" label="商品名称" prop="name">
  43. </el-table-column>
  44. <el-table-column align="center" min-width="150px" label="商品编号" prop="skuSeq">
  45. </el-table-column>
  46. <el-table-column align="center" min-width="80px" label="商品类型" prop="skuTypeName">
  47. </el-table-column>
  48. <el-table-column align="center" min-width="120px" label="商品属性" prop="productAttributeName">
  49. </el-table-column>
  50. <el-table-column align="center" min-width="150px" label="兑换方式" prop="deliveryTypeName">
  51. </el-table-column>
  52. <el-table-column align="center" min-width="150px" label="领取地点" prop="reclaimAddrName">
  53. </el-table-column>
  54. <el-table-column align="center" min-width="80px" label="兑换数" prop="skuCount">
  55. </el-table-column>
  56. <el-table-column align="center" min-width="80px" label="积分" prop="price">
  57. </el-table-column>
  58. <el-table-column align="center" min-width="80px" label="总积分" prop="total">
  59. </el-table-column>
  60. <el-table-column align="center" min-width="80px" label="活动标题" prop="title">
  61. </el-table-column>
  62. <el-table-column align="center" label="操作" width="80px" class-name="small-padding fixed-width">
  63. <template slot-scope="scope">
  64. <el-button type="success" size="small"
  65. @click="handleClick(scope.row.orderId, 'complete')">作废</el-button>
  66. </template>
  67. </el-table-column>
  68. </el-table>
  69. <!-- 分页 -->
  70. <div class="pagination-container">
  71. <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
  72. :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
  73. layout="total, sizes, prev, pager, next, jumper" :total="total">
  74. </el-pagination>
  75. </div>
  76. <!-- 添加或修改对话框 -->
  77. <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" :close-on-click-modal="false" width="70%">
  78. <h3>订单信息</h3>
  79. <el-form status-icon label-position="center" label-width="100px" style="width:100%;">
  80. <div style="display: flex;">
  81. <el-form-item label="订单编号">
  82. <el-input disabled v-model="detailData.orderSeq"></el-input>
  83. </el-form-item>
  84. <el-form-item label="员工姓名">
  85. <el-input disabled v-model="detailData.purchaser"></el-input>
  86. </el-form-item>
  87. <el-form-item label="部门名称">
  88. <el-input disabled v-model="detailData.deptName"></el-input>
  89. </el-form-item>
  90. </div>
  91. <div style="display: flex;">
  92. <el-form-item label="员工号">
  93. <el-input disabled v-model="detailData.employeNo"></el-input>
  94. </el-form-item>
  95. <el-form-item label="手机号">
  96. <el-input disabled v-model="detailData.userPhone"></el-input>
  97. </el-form-item>
  98. <el-form-item label="兑换时间">
  99. <el-input disabled v-model="detailData.createTime"></el-input>
  100. </el-form-item>
  101. </div>
  102. <div style="display: flex;">
  103. <el-form-item label="数量">
  104. <el-input disabled v-model="detailData.skuCount"></el-input>
  105. </el-form-item>
  106. <el-form-item label="单价(积分)">
  107. <el-input disabled v-model="detailData.price"></el-input>
  108. </el-form-item>
  109. <el-form-item label="订单状态">
  110. <el-input disabled v-model="detailData.orderTypeName"></el-input>
  111. </el-form-item>
  112. </div>
  113. <div v-if="detailData.deliveryType == 1" style="display: flex;">
  114. <el-form-item label="联系人">
  115. <el-input disabled v-model="detailData.contact"></el-input>
  116. </el-form-item>
  117. <el-form-item label="联系电话">
  118. <el-input disabled v-model="detailData.contactPhone"></el-input>
  119. </el-form-item>
  120. <el-form-item label="联系地址">
  121. <el-input type="textarea" :rows="2" disabled v-model="addressStr"></el-input>
  122. </el-form-item>
  123. </div>
  124. <div style="display: flex;">
  125. <el-form-item label="支付类型">
  126. <el-input disabled v-model="detailData.payTypeName"></el-input>
  127. </el-form-item>
  128. </div>
  129. </el-form>
  130. <h3>商品信息</h3>
  131. <el-form status-icon label-position="center" label-width="100px" style="width:100%;">
  132. <div style="display: flex;">
  133. <el-form-item label="商品编号">
  134. <el-input disabled v-model="detailData.skuSeq"></el-input>
  135. </el-form-item>
  136. <el-form-item label="商品名称">
  137. <el-input disabled v-model="detailData.name"></el-input>
  138. </el-form-item>
  139. <el-form-item label="商品类型">
  140. <el-input disabled v-model="detailData.skuTypeName"></el-input>
  141. </el-form-item>
  142. </div>
  143. <div style="display: flex;">
  144. <el-form-item label="商品属性">
  145. <el-input disabled v-model="detailData.productAttributeName"></el-input>
  146. </el-form-item>
  147. <el-form-item label="参考价格">
  148. <el-input disabled v-model="detailData.hisPrice"></el-input>
  149. </el-form-item>
  150. <el-form-item label="兑换方式">
  151. <el-input disabled v-model="detailData.deliveryTypeName"></el-input>
  152. </el-form-item>
  153. </div>
  154. <div style="display: flex;" v-if="detailData.deliveryType == 4">
  155. <el-form-item label="充值账号">
  156. <el-input disabled v-model="detailData.contactPhone"></el-input>
  157. </el-form-item>
  158. </div>
  159. <div v-if="detailData.deliveryType == 1">
  160. <el-form-item label="快递单号">
  161. <el-input disabled v-model="detailData.trackingNumber"></el-input>
  162. </el-form-item>
  163. </div>
  164. <div v-if="detailData.deliveryType == 2">
  165. <el-form-item label="兑换码">
  166. <el-input disabled style="width: 100%" type="textarea" :rows="2" v-model="detailData.trackingNumber"></el-input>
  167. </el-form-item>
  168. </div>
  169. <el-form-item label="备注">
  170. <el-input type="textarea" v-model="comment" style="width: 100%"></el-input>
  171. </el-form-item>
  172. </el-form>
  173. <el-table :data="tableData" border style="width: 100%">
  174. <el-table-column align="center" prop="orderStatus" label="订单流程" width="180">
  175. </el-table-column>
  176. <el-table-column align="center" prop="auditor" label="审核人" width="180">
  177. </el-table-column>
  178. <el-table-column align="center" prop="createTime" label="创建时间" width="180">
  179. </el-table-column>
  180. <el-table-column align="center" prop="comment" label="备注">
  181. </el-table-column>
  182. </el-table>
  183. <div slot="footer" class="dialog-footer">
  184. <el-button type="danger" @click="complete(1)">作废</el-button>
  185. </div>
  186. </el-dialog>
  187. </div>
  188. </template>
  189. <style>
  190. .demo-table-expand {
  191. font-size: 0;
  192. }
  193. .demo-table-expand label {
  194. width: 200px;
  195. color: #99a9bf;
  196. }
  197. .demo-table-expand .el-form-item {
  198. margin-right: 0;
  199. margin-bottom: 0;
  200. }
  201. </style>
  202. <script>
  203. import { complete, list, detail } from "@/api/exchangeManage";
  204. import { dataTypeList } from "@/api/public";
  205. import waves from "@/directive/waves"; // 水波纹指令
  206. import Tinymce from '@/components/Tinymce'
  207. export default {
  208. name: 'exchangeList',
  209. components: { Tinymce },
  210. directives: { waves },
  211. data() {
  212. return {
  213. productAttributeList: [],
  214. deliveryTypeList: [
  215. ],
  216. trackingNumber: '',
  217. comment: '',
  218. tableData: [],
  219. list: [],
  220. total: 0,
  221. listLoading: false,
  222. listQuery: {
  223. page: 1,
  224. limit: 10,
  225. purchaser: '',
  226. orderSeq: '',
  227. title: '',
  228. productAttribute:'',
  229. deliveryType:'',
  230. orderType:4
  231. },
  232. dialogVisible: false,
  233. dialogStatus: '',
  234. textMap: {
  235. complete: "审批",
  236. view: "详情",
  237. },
  238. detailData: { },
  239. addressStr:'',
  240. }
  241. },
  242. created() {
  243. this.getProductAttributeList();
  244. this.getDeliveryTypeList();
  245. this.getList();
  246. },
  247. methods: {
  248. getDeliveryTypeList(){
  249. dataTypeList({dictType:'exchange_methond'}).then(response => {
  250. this.deliveryTypeList = response.data.data;
  251. }).catch(() => {});
  252. },
  253. getProductAttributeList(){
  254. dataTypeList({dictType:'mall_sku_attribute'}).then(response => {
  255. this.productAttributeList = response.data.data;
  256. }).catch(() => {});
  257. },
  258. handleDownLoad(){
  259. window.location.href = process.env.BASE_API + '/mall-order/exportOrderLog?purchaser=' + this.listQuery.purchaser + '&orderSeq=' + this.listQuery.orderSeq + '&orderType=' + this.listQuery.orderType + '&title=' + this.listQuery.title + '&productAttribute=' + this.listQuery.productAttribute + '&deliveryType=' + this.listQuery.deliveryType;
  260. },
  261. checked(val){
  262. if(val.flag == 0 && val.deliveryType==1){
  263. if(!val.trackingNumber){
  264. this.$alert("请填写快递单号", "提示", {
  265. confirmButtonText: "确定",
  266. });
  267. return false;
  268. }
  269. };
  270. if(val.flag == 0 && val.deliveryType==2){
  271. if(!val.trackingNumber){
  272. this.$alert("请填写兑换码", "提示", {
  273. confirmButtonText: "确定",
  274. });
  275. return false;
  276. }
  277. };
  278. if(val.flag == 1){
  279. if(!val.comment){
  280. this.$alert("请填备注", "提示", {
  281. confirmButtonText: "确定",
  282. });
  283. return false;
  284. }
  285. }
  286. return true;
  287. },
  288. complete(flag) {
  289. const parms = {
  290. orderId:this.detailData.orderId,
  291. orderType:this.detailData.orderType,
  292. flag:flag,
  293. deliveryType:this.detailData.deliveryType,
  294. trackingNumber: this.detailData.trackingNumber,
  295. nowPrice:this.detailData.nowPrice,
  296. comment: this.comment,
  297. }
  298. const isChecked = this.checked(parms);
  299. if(isChecked){
  300. complete(parms).then((response) => {
  301. this.$notify({
  302. title: "成功",
  303. message: "操作成功",
  304. type: "success",
  305. duration: 2000,
  306. });
  307. this.getList();
  308. this.dialogVisible = false;
  309. })
  310. .catch(() => { });
  311. }
  312. },
  313. getDetail(id) {
  314. detail({ orderId: id }).then(response => {
  315. this.detailData = response.data.data;
  316. this.tableData = response.data.data.logs;
  317. this.addressStr = response.data.data.addressStr + response.data.data.street + response.data.data.contactAddr;
  318. }).catch(() => {})
  319. },
  320. handleClick(id, tag) {
  321. this.comment = '';
  322. this.dialogStatus = tag;
  323. this.getDetail(id);
  324. this.dialogVisible = true;
  325. },
  326. getList() {
  327. this.listLoading = true
  328. list(this.listQuery).then(response => {
  329. this.list = response.data.data.items
  330. this.total = response.data.data.total
  331. this.listLoading = false
  332. }).catch(() => {})
  333. },
  334. handleFilter() {
  335. this.listQuery.page = 1
  336. this.getList()
  337. },
  338. handleSizeChange(val) {
  339. this.listQuery.limit = val
  340. this.getList()
  341. },
  342. handleCurrentChange(val) {
  343. this.listQuery.page = val
  344. this.getList()
  345. },
  346. }
  347. }
  348. </script>
  349. <style>
  350. .ad-avatar-uploader .el-upload {
  351. border: 1px dashed #d9d9d9;
  352. border-radius: 6px;
  353. cursor: pointer;
  354. position: relative;
  355. overflow: hidden;
  356. }
  357. .ad-avatar-uploader .el-upload:hover {
  358. border-color: #409EFF;
  359. }
  360. .ad-avatar-uploader-icon {
  361. font-size: 28px;
  362. color: #8c939d;
  363. width: 178px;
  364. height: 178px;
  365. line-height: 178px;
  366. text-align: center;
  367. }
  368. .ad-avatar {
  369. display: block;
  370. }
  371. .exchangeView .el-dialog__body {
  372. padding-top: 0px;
  373. }
  374. </style>