Newer
Older
KaiFengPC / src / views / longoPeration / MaterialManagement.vue
@鲁yixuan 鲁yixuan on 27 Aug 7 KB updata
  1. <template>
  2. <!-- 物资管理 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  5. <el-form-item label="物资储备地点:" prop="specificLocation">
  6. <el-input v-model="queryParams.specificLocation" placeholder="请输入物资储备地点" clearable style="width: 180px" />
  7. </el-form-item>
  8. <el-form-item>
  9. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  10.  
  11. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  12. </el-form-item>
  13. </el-form>
  14. <!-- 按钮区域 -->
  15. <el-row :gutter="10" class="mb8">
  16. <el-col :span="1.5">
  17. <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
  18. </el-col>
  19. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  20. </el-row>
  21. <!-- 表格 -->
  22. <el-table :data="dataList" v-loading="loading" stripe :max-height="620">
  23. <el-table-column type="index" width="55" label="序号" />
  24. <el-table-column label="物资储备地点" prop="specificLocation" />
  25. <el-table-column label="具体位置" prop="address" />
  26. <el-table-column label="主要储备物资" prop="materialDetails" width="600" />
  27. <el-table-column label="负责人" prop="header" />
  28. <el-table-column label="联系方式" prop="headerPhone" />
  29. <el-table-column label="操作" width="280">
  30. <template #default="scope">
  31. <el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">详情</el-button>
  32. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row, 'view')">修改</el-button>
  33. <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row, 'view')">删除</el-button>
  34. </template>
  35. </el-table-column>
  36. </el-table>
  37. <!-- 分页 -->
  38. <pagination
  39. v-show="total > 0"
  40. :total="total"
  41. v-model:page="queryParams.pageNum"
  42. v-model:limit="queryParams.pageSize"
  43. @pagination="getList"
  44. />
  45. <!-- 新增弹窗 -->
  46. <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
  47. <el-form ref="roleRef" :model="form" :rules="rules" label-width="130px" :disabled="multiple">
  48. <el-row :gutter="20">
  49. <el-col :span="12">
  50. <el-form-item label="负责人:" prop="header">
  51. <el-input v-model="form.header" placeholder="请输入负责人" clearable style="width: 100%" />
  52. </el-form-item>
  53. </el-col>
  54. <el-col :span="12">
  55. <el-form-item label="联系方式:" prop="headerPhone">
  56. <el-input v-model="form.headerPhone" placeholder="请输入联系方式" clearable style="width: 100%" />
  57. </el-form-item>
  58. </el-col>
  59. </el-row>
  60. <el-row :gutter="20">
  61. <el-col :span="12">
  62. <el-form-item label="物资储备地点:" prop="specificLocation">
  63. <el-input v-model="form.specificLocation" placeholder="请输入物资储备地点" clearable style="width: 100%" />
  64. </el-form-item>
  65. </el-col>
  66. <el-col :span="12">
  67. <el-form-item label="具体位置:" prop="address">
  68. <el-input v-model="form.address" placeholder="请输入具体位置" clearable style="width: 100%" />
  69. </el-form-item>
  70. </el-col>
  71. </el-row>
  72.  
  73. <el-row :gutter="20">
  74. <el-col :span="12">
  75. <el-form-item label="经度:" prop="lon">
  76. <el-input v-model="form.lon" placeholder="请输入经度" clearable style="width: 100%" />
  77. </el-form-item>
  78. </el-col>
  79. <el-col :span="12">
  80. <el-form-item label="纬度:" prop="lat">
  81. <el-input v-model="form.lat" placeholder="请输入纬度" clearable style="width: 100%" />
  82. </el-form-item>
  83. </el-col>
  84. </el-row>
  85.  
  86. <el-row :gutter="20">
  87. <el-col :span="24">
  88. <el-form-item label="主要储备物资:" prop="materialDetails">
  89. <el-input
  90. type="textarea"
  91. :rows="5"
  92. v-model="form.materialDetails"
  93. placeholder="请输入主要储备物资"
  94. clearable
  95. style="width: 100%"
  96. />
  97. </el-form-item>
  98. </el-col>
  99. </el-row>
  100. </el-form>
  101. <template #footer>
  102. <div class="dialog-footer">
  103. <el-button type="primary" @click="submitForm">确 定</el-button>
  104. <el-button @click="cancel">取 消</el-button>
  105. </div>
  106. </template>
  107. </el-dialog>
  108. </div>
  109. </template>
  110. <script setup name="MaterialManagement">
  111. import {
  112. FloodPreventionMaterialpage,
  113. FloodPreventionMaterialedit,
  114. FloodPreventionMaterialadd,
  115. FloodPreventionMaterialdelete,
  116. } from '@/api/longoPeration/MaterialManagement';
  117. const { proxy } = getCurrentInstance();
  118. const open = ref(false);
  119. const multiple = ref(false);
  120. const showSearch = ref(true);
  121. const loading = ref(true);
  122. const total = ref(0);
  123. const title = ref('');
  124. const dataList = ref([]);
  125. const AllData = reactive({
  126. form: {},
  127. queryParams: {
  128. pageNum: 1,
  129. pageSize: 10,
  130. specificLocation: '',
  131. },
  132. rules: {
  133. header: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
  134. headerPhone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  135. },
  136. });
  137. const { queryParams, form, rules } = toRefs(AllData);
  138.  
  139. //搜索
  140. function handleQuery() {
  141. getList();
  142. }
  143. //重置
  144. function resetQuery() {
  145. proxy.resetForm('queryRef');
  146. handleQuery();
  147. }
  148. // 新增
  149. function handleAdd() {
  150. title.value = '新增物资管理';
  151. open.value = true;
  152. form.value = {};
  153. multiple.value = false;
  154. }
  155. // 新增中取消事件
  156. function cancel() {
  157. open.value = false;
  158. proxy.resetForm('roleRef');
  159. }
  160.  
  161. //查看详情操作
  162. function handleDetail(row) {
  163. open.value = true;
  164. multiple.value = true;
  165. title.value = '查看物资管理';
  166. form.value = { ...row };
  167. }
  168. // 修改按钮操作
  169. function handleUpdate(row) {
  170. open.value = true;
  171. title.value = '修改物资管理';
  172. multiple.value = false;
  173. form.value = { ...row };
  174. }
  175.  
  176. /** 搜索列表 */
  177. const getList = async () => {
  178. loading.value = true;
  179. let res = await FloodPreventionMaterialpage(queryParams.value);
  180. dataList.value = res.data;
  181. total.value = res.total;
  182. loading.value = false;
  183. };
  184.  
  185. /** 新增弹框 修改弹框 提交按钮 */
  186. async function submitForm() {
  187. proxy.$refs['roleRef'].validate(valid => {
  188. if (valid) {
  189. if (form.value.id != undefined) {
  190. FloodPreventionMaterialedit(form.value).then(() => {
  191. proxy.$modal.msgSuccess('修改成功');
  192. open.value = false;
  193. getList();
  194. });
  195. } else {
  196. FloodPreventionMaterialadd(form.value).then(() => {
  197. proxy.$modal.msgSuccess('新增成功');
  198. open.value = false;
  199. getList();
  200. });
  201. }
  202. }
  203. });
  204. }
  205. // 表格删除
  206. function handleDelete(row) {
  207. proxy.$modal
  208. .confirm('是否确认删除?')
  209. .then(async () => {
  210. const res = await FloodPreventionMaterialdelete(row.id);
  211. if (res?.code !== 200) return;
  212. proxy.$modal.msgSuccess('操作成功!');
  213. getList();
  214. })
  215. .catch(() => {});
  216. }
  217. onMounted(() => {
  218. getList();
  219. });
  220. </script>
  221. <style scoped lang="scss">
  222. .dituclass {
  223. width: 100%;
  224. height: 300px;
  225. // background: red;
  226. margin-bottom: 10px;
  227. border: 1px solid #004565;
  228. }
  229. </style>