daimp-front/sub-government-affairs-service/src/views/landManage/component/landPartol/index.vue

<template>
  <section>土地巡查</section>
  <div class="options_btns">
    <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
      {{ item.label }}
    </el-button>
  </div>
  <el-table :data="list">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index"> </el-table-column>
    <el-table-column label="任务编号" prop="landName" show-overflow-tooltip />
    <el-table-column label="任务名称" prop="address" show-overflow-tooltip />
    <el-table-column label="任务成员" prop="owner" show-overflow-tooltip />
    <el-table-column label="巡查类型" prop="landClassificationType" show-overflow-tooltip />
    <el-table-column label="巡查注意事项" prop="978.2" show-overflow-tooltip />
    <el-table-column label="巡查对象" prop="coordinate" show-overflow-tooltip />
    <el-table-column label="是否违法" prop="landTransfer" show-overflow-tooltip>
      <template #default="{ row }">
        {{ !row.landTransfer ? '是' : '否' }}
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="landTransfer" show-overflow-tooltip>
      <template #default="{ row }">
        {{ !row.landTransfer ? '是' : '否' }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
      <el-button type="primary" @click="doResults()">登记结果</el-button>
    </el-table-column>
  </el-table>
  <Pagina :page-data="pageData" />
  <el-dialog v-model="infoVisible" title="新增巡查" width="1000" center>
    <el-form ref="infoRef" :model="infoData" :rules="infoRules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务编号:" prop="num">
            <el-input v-model="infoData.num" placeholder="请输入" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="任务成员" prop="member">
            <el-select v-model="infoData.member" :multiple="true" placeholder="请选择任务成员" style="width: 240px" :clearable="true">
              <el-option v-for="item in memberOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查类型" prop="gridName">
            <el-select v-model="infoData.type" placeholder="请选择巡查类型" style="width: 240px" :clearable="true">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查注意事项" prop="gridName">
            <el-input
              v-model="infoData.mark"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              laceholder="请输入巡查注意事项"
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查对象" prop="gridName">
            <el-select v-model="infoData.target" placeholder="请选择巡查对象" style="width: 240px" :clearable="true">
              <el-option v-for="item in objOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="infoCancel">取消</el-button>
        <el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

/* --------------- data --------------- */
// #region
const btns = reactive([
  {
    label: '新增巡查',
    method: function () {
      console.log('add');
      infoVisible.value = true;
    },
  },
  {
    label: '导出',
    disabled: true,
    method: function () {
      console.log('export');
    },
  },
]);

const pageData = reactive({
  page: 1,
  size: 10,
  total: 0,
});
const list = ref([]);
const infoVisible = ref(false);
const infoRef = ref();
const infoData = reactive({
  num: '',
  name: '',
  member: [],
  type: '',
  mark: '',
  target: '',
});
const infoRules = reactive({
  num: [{ required: true, message: '请输入编号', trigger: 'blur' }],
});
const memberOptions = reactive([
  {
    value: '成员1',
    label: 'Option1',
  },
  {
    value: '成员2',
    label: 'Option2',
  },
]);

const typeOptions = reactive([
  {
    value: '巡查类型1',
    label: 'Option1',
  },
  {
    value: '巡查类型2',
    label: 'Option2',
  },
]);

const objOptions = reactive([
  {
    value: '巡查对象1',
    label: 'Option1',
  },
  {
    value: '巡查对象2',
    label: 'Option2',
  },
]);

// #endregion

/* --------------- methods --------------- */

const doResults = () => {
  console.info('登记结果');
};

const subMitInfo = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      infoHide();
      console.log('submit!');
    } else {
      console.log('error submit!');
    }
  });
};

const infoCancel = () => {
  infoHide();
};

const infoHide = () => {
  infoRef.value && infoRef.value.resetFields();
  infoVisible.value = false;
};
// #region

// #endregion
</script>

<style lang="scss" scoped>
.options_btns {
  margin: 16px 0;
}
</style>