index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" size="small" label-width="100px">
  4. <el-form-item label="省" prop="provinceId">
  5. <el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="getCityData" filterable style="width: 200px;">
  6. <el-option v-for="(item,index) in provinceDataList" :key="index" :label="item.name" :value="item.name"></el-option>
  7. </el-select>
  8. </el-form-item>
  9. <el-form-item label="市" prop="cityId">
  10. <el-select v-model="queryParams.cityId" placeholder="请选择市" @change="getDistrictData" filterable style="width: 200px;">
  11. <el-option v-for="(item, index) in cityDataList" :key="index" :label="item.name" :value="item.name"></el-option>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="区" prop="districtId">
  15. <el-select v-model="queryParams.districtId" placeholder="请选择区" filterable style="width: 200px;">
  16. <el-option v-for="(item, index) in districtDataList" :key="index" :label="item.name" :value="item.name"></el-option>
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="登录名称" prop="userName">
  20. <el-input v-model="queryParams.userName" clearable style="width: 200px;" placeholder="请输入登录名称"></el-input>
  21. </el-form-item>
  22. <el-form-item>
  23. <el-button type="primary" @click="handleQuery">搜索</el-button>
  24. <el-button @click="resetQuery">重置</el-button>
  25. </el-form-item>
  26. </el-form>
  27. <h3 class="toolbar">
  28. <span class="title">列表</span>
  29. <div class="tool">
  30. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
  31. </div>
  32. </h3>
  33. <el-table v-loading="loading" :data="list" border>
  34. <el-table-column label="账户" prop="nickName" width="120" align="center" />
  35. <el-table-column label="登录名称" prop="userName" align="center" width="120"></el-table-column>
  36. <el-table-column label="手机号" prop="phonenumber" align="center" width="120" />
  37. <el-table-column label="负责地区" prop="remark" align="center" width="200"></el-table-column>
  38. <el-table-column label="创建时间" align="center" prop="createTime" width="160"></el-table-column>
  39. <el-table-column label="状态" align="center" key="status">
  40. <template slot-scope="scope">
  41. <el-switch
  42. v-model="scope.row.status"
  43. active-value="0"
  44. inactive-value="1"
  45. @change="handleStatusChange(scope.row)"
  46. ></el-switch>
  47. </template>
  48. </el-table-column>
  49. <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
  50. <template slot-scope="scope">
  51. <el-button type="text" @click="handleUpdate(scope.row)">修改</el-button>
  52. <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
  53. <el-button type="text" @click="handleResetPwd(scope.row)">重置密码</el-button>
  54. </template>
  55. </el-table-column>
  56. </el-table>
  57. <pagination
  58. v-show="total>0"
  59. :total="total"
  60. :page.sync="queryParams.pageNum"
  61. :limit.sync="queryParams.pageSize"
  62. @pagination="getList"/>
  63. <add-tax-user ref="addTax" v-if="addTaxVisible" @refreshData="getList()"></add-tax-user>
  64. </div>
  65. </template>
  66. <script>
  67. import {getProvinceDataApi,getRegionChildrenApi} from "@/api/common/common"
  68. import {entStateOptions, getLabel, authStateOptions} from '@/utils/dataFormat'
  69. import {listTaxAdminApi,deleteTaxApi} from '@/api/admin/tax/tax'
  70. import { changeUserStatus } from "@/api/system/user";
  71. import AddTaxUser from './components/AddTaxUser'
  72. import { resetUserPwd } from "@/api/system/user";
  73. export default {
  74. components: {
  75. AddTaxUser
  76. },
  77. data () {
  78. return {
  79. loading: false,
  80. addTaxVisible: false,
  81. type: '',
  82. provinceDataList: [],
  83. cityDataList: [],
  84. districtDataList: [],
  85. entStateOptions: entStateOptions,
  86. authStateOptions: authStateOptions,
  87. // 模板状态
  88. // statusOptions: accessStatus,
  89. dateRange: [],
  90. queryParams: {
  91. pageNum: 1,
  92. pageSize: 10,
  93. provinceId: undefined,
  94. cityId: undefined,
  95. districtId: undefined
  96. },
  97. list: [],
  98. total: 0,
  99. open: false,
  100. openInfo: false,
  101. }
  102. },
  103. created() {
  104. this.getList()
  105. this.getProvinceData()
  106. },
  107. methods: {
  108. //选择省份
  109. getCityData() {
  110. this.queryParams.cityId = ''
  111. this.queryParams.districtId = ''
  112. getRegionChildrenApi(this.queryParams.provinceId).then(res => {
  113. if(res.code == 200) {
  114. this.cityDataList = res.data
  115. }
  116. })
  117. },
  118. //选择市
  119. getDistrictData() {
  120. this.queryParams.districtId = ''
  121. getRegionChildrenApi(this.queryParams.cityId).then(res => {
  122. if(res.code == 200) {
  123. this.districtDataList = res.data
  124. }
  125. })
  126. },
  127. getProvinceData() {
  128. getProvinceDataApi().then(res => {
  129. if(res.code == 200) {
  130. this.provinceDataList = res.data
  131. }
  132. })
  133. },
  134. getList() {
  135. this.loading = true;
  136. listTaxAdminApi(this.queryParams).then(response => {
  137. this.list = response.data.records;
  138. this.total = response.data.total;
  139. this.loading = false;
  140. });
  141. },
  142. handleAdd() {
  143. this.type = 'add'
  144. this.addTaxVisible = true
  145. this.$nextTick(() => {
  146. this.$refs.addTax.init(this.type)
  147. })
  148. },
  149. handleUpdate(row) {
  150. this.type = 'update'
  151. this.addTaxVisible = true
  152. this.$nextTick(() => {
  153. this.$refs.addTax.init(this.type, row.userId)
  154. })
  155. },
  156. // 用户状态修改
  157. handleStatusChange(row) {
  158. let text = row.status === "0" ? "启用" : "停用";
  159. this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function() {
  160. return changeUserStatus(row.userId, row.status);
  161. }).then(() => {
  162. this.$modal.msgSuccess(text + "成功");
  163. }).catch(function() {
  164. row.status = row.status === "0" ? "1" : "0";
  165. });
  166. },
  167. /** 重置密码按钮操作 */
  168. handleResetPwd(row) {
  169. this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
  170. confirmButtonText: "确定",
  171. cancelButtonText: "取消",
  172. closeOnClickModal: false,
  173. inputPattern: /^.{5,20}$/,
  174. inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
  175. }).then(({ value }) => {
  176. resetUserPwd(row.userId, value).then(response => {
  177. this.$modal.msgSuccess("修改成功,新密码是:" + value);
  178. });
  179. }).catch(() => {});
  180. },
  181. handleDelete(row) {
  182. const id = row.userId;
  183. this.$confirm('是否确认删除该数据?', "警告", {
  184. confirmButtonText: "确定",
  185. cancelButtonText: "取消",
  186. type: "warning"
  187. }).then(function() {
  188. return deleteTaxApi(id);
  189. }).then(() => {
  190. this.queryParams.pageNum = 1;
  191. this.getList();
  192. this.msgSuccess("删除成功");
  193. })
  194. },
  195. // 重置
  196. resetQuery() {
  197. this.dateRange = [];
  198. this.resetForm("queryForm");
  199. this.handleQuery();
  200. },
  201. // 搜索
  202. handleQuery() {
  203. this.queryParams.pageNum = 1;
  204. this.getList();
  205. },
  206. statusFormat(row, col, val, index) {
  207. return getLabel(accessStatus, val)
  208. },
  209. entSateFormat(row, col, val, index) {
  210. return getLabel(entStateOptions, val)
  211. },
  212. authStateFormat(row, col, val, index) {
  213. return getLabel(authStateOptions, val)
  214. }
  215. }
  216. }
  217. </script>
  218. <style>
  219. </style>